时间戳

首页 > 解决方案 > 使用整个窗口的“scroll-snap-type”示例？

css - 使用整个窗口的“scroll-snap-type”示例？

问题描述

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

我放弃并寻找 Javascript 替代方案，但在使用 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”，但似乎还需要其他东西才能完成这项工作。

标签： cssscrollscroll-snap-type

解决方案

推荐阅读