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

Question

这个问题比标题描述的要复杂一些。我正在尝试做这样的事情:

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

我想出了一个想法，即浏览器的滚动条应该是某种 Controller ，这意味着它应该指示一个位置值，该值将由 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

您在 fixed 之前添加了 scroll，因此无论是否有 scroll 都没有关系，它是 fixed 的，因此您不能仅在 under 下滚动固定区域。