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

Posted 2023-02-18

【中文标题】如何在 Chrome 中模拟 CSS 滚动捕捉点？

【英文标题】：How to emulate CSS Scroll Snap Points in Chrome?

【发布时间】：2015-09-23 13:33:13

【问题描述】：

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 实现？

【问题讨论】：

唯一想到的就是插件：Scrollify、panelSnap 和 fullPage。

就像@dingo_d 所说，你必须使用众多可用插件之一或纯 JS。

【参考方案1】：

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

尚未对其进行广泛测试。

【讨论】：

它似乎依赖于要实现的 css 类，这不完全是一个 polyfill

【参考方案2】：

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

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

【讨论】：

我相信它不适用于像素单位，只有 vh 或 %

@davidtaubmann 您一定错过了scrollsnap-polyfill documentation 说它可以与vh/vw、percentages 和pixels 一起使用。

经过大量测试，它从未与像素一起工作。所有示例都发现，一旦我将 CSS 值更改为像素，正常工作的地方就会停止工作。如果您有一个专注于像素的工作示例，我将不胜感激。

【参考方案3】：

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

为什么

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

如何

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

示例

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();

【讨论】：

两天试图使这个库工作但没有好的结果。我正在尝试在 React 无状态组件中使用它。我看到容器 div 被 lib 修改（添加溢出：自动样式），但从不使用滚动事件调用回调。

嘿 @SantiagoBarchetta , here 你可以找到一个使用 React 库的示例，以防它可能有所帮助。否则，如果您可以提供包含用例示例的链接，我很乐意帮助您调试问题:)

无法让插件使用非整数的 PX 值或百分比

您好@ESR，感谢您的反馈，从v3.2.1开始支持像素值和浮点数

【参考方案4】：

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

---

只是坐等。坐等吧:-)

【参考方案5】：

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

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