使用整个窗口的“滚动捕捉类型”示例?

捕捉整个窗口/视口 一些垂直堆叠的div。例如:

[ content, scroll normally ]
[ "scroll snap" to this div ]
[ "scroll snap" to this div ]
[ "scroll snap" to this div ]
[ content, scroll normally ] 

要澄清的是,没有“固定”的内容,我想“捕捉”的div只是矩形,比如300x700。

我试着添加 scroll-snap-type: y mandatory; 对于div的父容器,在firefox69中不起作用。我还尝试添加 滚动捕捉类型:y必选; 到“body”和“html”,这也不起作用。你能给我举一个在整个窗口上使用“滚动捕捉类型”的例子吗?

我放弃了,寻找了一个Javascript替代方案,但似乎Javascript解决方案的开发在添加到带有CSS的浏览器之后放慢了/停止了。我尝试了jQuery的“Scrollify”,但它有一些小问题,效果不太好。

代码应该是这样的。

<style>
  #container { scroll-snap-type: y mandatory; }
  #container div { 
    width: 300px; 
    height: 700px; 
    scroll-snap-align: center;
  }
</style>

<div>this content scrolls normally</div>
<div id="container">
  <div>snap to here</div>
  <div>snap to here</div>
  <div>snap to here</div>
</div>
<div>this content scrolls normally</div>

为什么这样不行?

我找到了一个我想做的例子。。。 https://snap.glitch.me/product.html 但我正在寻找一个更简单的例子,这样我就可以找出我的代码缺少了什么。据推测,只有两个必需的CSS元素是“scroll-snap-type”和“scroll-snap-align”,但似乎还需要其他一些东西来实现这一点。