如何捕获 div 上的滚动事件以仅滚动最顶部（按 z-index）组件

Question

我已经说明了我在 Codepen 中描述的问题：https://codepen.io/anon/pen/KZOwdm?editors=1111

我的页面顶部有一个标题栏，页面顶部有一个固定位置 (position: fixed;)。

我页面的主要内容是一个带有margin-top 的可滚动列表，以确保它位于标题栏下方。点击这些项目中的任何一个都会带来一个slide-up，这是一个position: fixed; div 和z-index: 2;，它覆盖了从标题栏正下方到屏幕底部的整个页面。

我在滚动此slide-up 时遇到问题。我希望在上滑层上滚动只会滚动该 div 的内容，而不是整个页面（包括下面的内容）。当下面的内容很长时，这尤其令人沮丧。我看到的是，一旦上滑完成滚动，父 div 就会开始滚动。

在典型情况下，这种向上滑动是为了覆盖页面，有点像显示“新页面”。因此，当滚动上滑 div 时，我根本不希望父 div 进入等式。这里的第二个问题是，在移动设备上滚动似乎只滚动父级，而不是向上滑动。这如何实现？

Answer 1

你需要两件事：

1. overflow-y: scroll 在.slide-up 上以允许内容实际滚动
2. height 小到足以让文本实际溢出 total height
   （不仅仅是可见的内容）。

添加overflow-y: scroll 并将.slide-up 的height 更改为calc(100% - 40px)（适用于top）在以下示例中展示了这一点：

.tabs {
  position: fixed;
  top: 0;
  height: 40px;
  background: #f54;
  width: 100%;
  color: white;
  padding-left: 1em;
  display: flex;
  align-items: center;
  z-index: 2;
}

.slide-up {
  z-index: 2;
  top: 40px;
  position: fixed;
  background-color: #ffa000;
  height: calc(100% - 40px);
  width: 100px;
  left: 100px;
  color: #fff;
  overflow-y: scroll;
}

<div class='tabs'>
  <h5>Tabs</h5>
</div>
<div class='content'>
  <h5>Here is some random text to make this scroll</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
</div>
<div class='slide-up'>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content end</h5>
</div>

希望这会有所帮助！ :)