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>

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

1 个答案: