如何在Chrome中模拟CSS Scroll Snap Points？

Question

Firefox 39，Safari 9和IE11支持CSS Scroll Snap Points。 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

如果您愿意考虑使用一致的跨浏览器行为重新实现此功能的vanilla javascript，您可以使用 this library

Why

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

How

该库使用vanilla javascript缓动函数重新实现css捕捉功能，并使用容器元素的scrollTop / scrollLeft属性和滚动事件监听器的值进行工作。

Example

import ScrollSnap from 'scroll-snap'

const snapConfig = {
  scrollSnapDestination: '90% 0%', // scroll-snap-destination css property, as defined here: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination
  scrollTimeout: 100, // time in ms after which scrolling is considered finished
  scrollTime: 300 // time in ms for the smooth snap
}

function callback () {
  console.log('called when snap animation ends')
}

const element = document.getElementById('container')
const snapObject = new ScrollSnap(element, snapConfig)

snapObject.bind(callback)

// unbind the element
// snapObject.unbind();

Answer 2

我发现了一个polyfill：https://github.com/zigotica/scrollSnapPointsPolyfill

没有进行过广泛的测试。

Answer 3

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

还应该注意的是，CSS Snap Points的规范已经改变，不再包括一些要求的属性，以及添加新的属性。

Answer 4

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

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

Answer 5

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

---

坐下来等一下坐下等待:-)