4

If I have a page where the whole page is scrollable, and there are also some scrollable child elements inside it (e.g. they have overflow and a normal js scrollbar), can I conditionally disable scrolling the child elements? in many cases the user will probably just want to scroll the outer page rather than the child element their mouse is over. We have considered that it is generally sort of an anti pattern in UI design to have scrollable child elements like this but it is needed.

I tried for example using capture event handling but not sure if I had the right setup

I also tried some solution that mentions conditionally maybe adding overflow:hidden like here How to prevent scrolling in a child from scrolling its parent, but this actually makes it so that the scroll state of the child element is not preserved (e.g. it snaps the child scroll back to the top)

Colin D
  • 2,822
  • 1
  • 31
  • 38
  • Can you show the html and css code ? – Ravi Gajera May 27 '21 at 02:09
  • @RaviGajera here is an example codesandbox that might be an example page. i want to more easily allow the user to scroll the outer page even though the inner elements are scrollable https://codesandbox.io/s/patient-wind-ieskh?file=/src/App.js – Colin D May 27 '21 at 02:19

1 Answers1

2

Experiment with touch-action and pointer-events.

It'll probably get you pretty close to what you want.

E.g. you could add or remove a class based on your conditions.

section, div {
  overflow-y: scroll;
  overflow-x: none;
}

section {
  max-height: 6em;
  background-color: lightblue;
}

div {
  background-color: rgba(0,0,0,0.5);
  height: 2em;
}

div.special {
  pointer-events: none;
  touch-action: none;
  color: white;
}
<section>
  <div>
    1 1 1<br />
    2 2 2<br />
    3 3 3<br />
    4 4 4<br />
    5 5 5<br />
    6 6 6<br />
  </div>
  <div class="special">
    1 1 1<br />
    2 2 2<br />
    3 3 3<br />
    4 4 4<br />
    5 5 5<br />
    6 6 6<br />
  </div>
  <div>
    1 1 1<br />
    2 2 2<br />
    3 3 3<br />
    4 4 4<br />
    5 5 5<br />
    6 6 6<br />
  </div>
</section>
Chase
  • 3,028
  • 14
  • 15
  • this is a good suggestion...it is a little tricky because does this then mean I have to wire up logic to add this class to basically all parts of the code that have a child scroll? – Colin D May 27 '21 at 02:49
  • You would need to add those styles to any "exceptions" to "normal" scroll rules, yes. That could be individually or at a grouped level based on your DOM structure. There isn't enough details provided beyond that to know what you're looking for exactly. – Chase May 27 '21 at 03:59
  • overflow-x: none was not working for me on chrome. overlfow-x: hidden did work. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x – Andr May 17 '23 at 08:21