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

Question

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

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

我还尝试了一些解决方案，比如在这里有条件地添加overflow:hidden，如何防止子元素滚动其父元素，但这实际上使子元素的滚动状态不被保留（例如，它将子滚动条弹回到顶部）。

- Colin D

---

你能展示一下 HTML 和 CSS 代码吗？ - Ravi Gajera

@RaviGajera 这是一个示例 codesandbox，可能是一个示例页面。我想更轻松地允许用户滚动外部页面，即使内部元素是可滚动的 https://codesandbox.io/s/patient-wind-ieskh?file=/src/App.js - Colin D

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>

- Chase

---

这是一个好建议……但有点棘手，因为这是否意味着我必须连接逻辑来将此类添加到基本上所有具有子滚动的代码部分？ - Colin D

您需要将这些样式添加到任何“异常”滚动规则中，是的。这可以根据您的DOM结构单独或分组级别进行。除此之外没有提供足够的细节来确切了解您正在寻找什么。 - Chase

在Chrome上，overflow-x：none对我不起作用。但overflow-x：hidden有效。来源：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x - Andr