如何在 Chrome 中模拟 CSS 滚动捕捉点？

Question

Firefox 39、Safari 9 和 IE11 支持 CSS 滚动捕捉点。 Chrome 具有特征 in development.

是否有可以模拟以下 CSS 样式的 polyfill：

-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-behavior: smooth;
-ms-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-scroll-snap-points-y: repeat(600px);
-ms-scroll-snap-points-y: snapInterval(0px, 600px); /* Old syntax */
scroll-snap-points-y: repeat(600px);
overflow-y: auto;
overflow-x: hidden;

直到 Chrome 实施此功能？

Answer 1

我找到了一个 polyfill：https://github.com/zigotica/scrollSnapPointsPolyfill

尚未对其进行广泛测试。

Answer 2

这是另一个 polyfill：https://github.com/ckrack/scrollsnap-polyfill/

还应注意，CSS Snap Points 的规范已更改，不再包括一些要求的属性，但也增加了新的属性。

Answer 3

如果您愿意考虑 vanilla javascript 重新实现 具有一致的跨浏览器行为的此功能，您可以使用 这个图书馆

为什么

使用它而不是本机 css 解决方案的主要原因是它适用于所有现代浏览器，并且具有可自定义的配置以允许在转换和滚动检测中自定义计时。

如何

该库使用原版 javascript 缓动函数重新实现了 css 捕捉功能，并使用容器元素的 scrollTop/scrollLeft 属性的值和滚动事件侦听器

例子

import createScrollSnap from 'scroll-snap'

const element = document.getElementById('container')

const { bind, unbind } = createScrollSnap(element, {
  snapDestinationX: '0%',
  snapDestinationY: '90%',
  timeout: 100,
  duration: 300,
  threshold: 0.2,
  snapStop: false,
  easing: easeInOutQuad,
}, () => console.log('snapped'))

// remove the listener 
// unbind();

// re-instantiate the listener 
// bind();

Answer 4

Chrome 69 将包含 the feature。无需解决方法。

坐等吧。请坐等:-)

Answer 5

此刻这些东西的工作非常糟糕，在 Google 上滚动仅适用于 ovrflow:auto 容器属性正确 scroll-snap-align 属性项目和 滚动填充 属性容器中的每个项目。

[https://webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css--cms-30333][1]

如何在 Chrome 中模拟 CSS 滚动捕捉点？

How to emulate CSS Scroll Snap Points in Chrome?

css

polyfills

为什么

如何

例子