Question

我在网上找到的所有示例都是针对另一个页面中显示的小滚动框的。我想将整个窗口/视口捕捉到垂直堆叠的一些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;添加到divs的父容器中，在Firefox 69中不起作用。我还尝试了将scroll-snap-type: y mandatory;添加到“ body和” html“中，但这不起作用也可以给我展示在整个窗口上使用“ scroll-snap-type”的任何示例吗？

我放弃了，寻找了Javascript替代方案，但是在将CSS解决方案添加到带有CSS的浏览器中之后，Javascript解决方案的开发似乎停滞/停止了。我为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”，但似乎还需要其他一些东西才能完成这项工作。

使用整个窗口的“滚动快照类型”示例？

0 个答案: