Unable to scroll div with a combination of overflow-x: hidden and overscroll-behavior: none

user_1414674 0
Viewed 212

I'm trying to understand why the div rendered by the below markup cannot be scrolled vertically with the scroll wheel. It can be scrolled by dragging the scrollbar, or even by using the scroll wheel while hovered over the scrollbar.

If I remove either the overscroll-behavior: none or the overflow-x: hidden, the scrolling works as expected.

Why is this the case? Is there part of the CSS spec I can look at to better understand this interaction?

* {
  overscroll-behavior: none;
}

.container {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.content {
  height: 2000px;
  background: red;
  overflow-x: hidden;
}
<div class="container">
  <section class="content"></section>
</div>

https://codepen.io/dyancat/pen/eYyyaNr

css html
1 Answers

I think the issue is, that you are tying to scroll the container with focus on the content which is not scrollable. This is not possible with overscroll-behavior: none.

Please see the modified snippet, where you are able to scroll the container (green), but not the content (red), since the content is not the element which is scrollable.

* {
  overscroll-behavior: none;
}

.container {
  width: 300px;
  height: 100px;
  background: green;
  overflow: auto;
}

.content {
  height: 2000px;
  width: 200px;
  background: red;
  overflow-x: hidden;
  overflow-y: scroll;
}
<div class="container">
  <section class="content"></section>
</div>

user_9658520
Related