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

Question

这个问题比标题所能描述的要复杂一些。我正在试着做这样的东西：

有一个带有内容部分的页面布局。每个部分为100vh，其中一些更高。当用户向下滚动或滑动动画时，会滑到下一个部分。当用户在较高的区段中自由滚动时，除非在区段的边界处，否则会出现动画。

我想出了一个想法，浏览器的滚动条应该是某种控制器，这意味着它应该指示一个位置值，该值将由JS转换为适当的动画。我已经创建了一个固定定位的容器，将页面主体上的部分设置为总部分的高度，以便滚动条显示正确的值。

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

所以现在我在有一个窗口滚动条和不能在固定容器上滚动之间左右为难。如果能帮上忙我会非常感激。干杯!

一些html只是为了让代码链接起作用：

<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

你在固定之前添加了滚动，所以不管你有没有滚动，它都是固定的，所以你不能在固定区域上滚动。