如何在固定容器下滚动页面？

Question

问题比标题所描述的要复杂一些。我试图做这样的事情：

有一个包含内容部分的单页面布局。每节100vh，其中一些更高。当用户向下滚动或滑动时，动画会滑动到下一部分。当在较高的部分时，用户可以自由滚动，除非在该部分的边界处，然后出现动画。

我已经想到浏览器的滚动条应该是控制器的东西，这意味着它应该指示一个位置值，该值将由JS转换为适当的动画。我创建了一个固定定位的容器，其中的部分覆盖在页面的主体上，其高度设置为总截面高度，因此滚动条指示正确的值。

问题是我认为我不希望滚动条可见，因为它在拖动时会产生一些矛盾。此外，还会有一些内容从侧面滑入，并带有自己的滚动条。我认为如果滚动条在div而不是窗口中，我可以通过做一些技巧来隐藏滚动条，但看起来当固定容器在带有滚动条的容器中时，当鼠标结束时滚动不会发生固定的容器。

所以现在我被困在有一个窗口滚动条而不是实际上能够滚动固定容器之间。我非常感谢任何帮助。干杯！

一些html只是为了工作的codepen链接：

<div class="fixed">
  <div class="section-container">
    <div class="section"><h1>section 1</h1></div>
    <div class="section"><h1>section 2</h1></div>
    <div class="section"><h1>section 3</h1></div>
  </div>
</div>

codepen example with body scroll

codepen example with container scroll

Answer 1

你在固定之前添加了滚动，所以如果你有滚动它并不重要它是固定的，所以你不能只在下面滚动固定区域。