防止子元素滚动，但允许滚动父元素

Question

如果我有一个整个页面都可以滚动的页面，并且其中还有一些可滚动的子元素（例如，它们有溢出和正常的 js 滚动条），我可以有条件地禁用滚动子元素吗？在许多情况下，用户可能只想滚动外部页面而不是鼠标悬停的子元素。我们认为，在 UI 设计中，像这样具有可滚动的子元素通常是一种反模式，但它是必需的。

我尝试了例如使用捕获事件处理，但不确定我是否有正确的设置

我还尝试了一些解决方案，有条件地提到可能添加溢出：隐藏就像这里How to prevent scrolling in a child from scrolling its parent，但这实际上使得子元素的滚动状态不被保留（例如，它将子滚动卡回顶部)

Answer 1

用touch-action 和pointer-events 进行实验。

它可能会让你非常接近你想要的。

例如您可以根据自己的条件添加或删除一个类。

---

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>