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

Question

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

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

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

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

在典型情况下，此向上滑动旨在覆盖页面，有点像显示“新页面”。所以，我不希望父 div 在滑过上滑 div 时完全进入等式。这里的第二个问题是，在移动设备上滚动似乎仅滚动父级，而不是向上滑动。如何实现？

Answer 1

你需要两件事:

1. overflow-y: scroll .slide-up 以允许内容实际滚动
2. A 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>

希望对您有所帮助! :)