如何在滚动时捕捉每个元素
How to snap each element while scrolling
我正在尝试在 HTML 中重新创建 Google 的 Playstore 设计。我已经使我的容器水平滚动，然后添加 scroll-snap-type: x proximity; 和 scroll-snap-align: start; 以使元素在滚动时对齐。但是，由于滚动速度太快，只有第三个或第四个元素会卡住。我知道滚动速度不应该被代码篡改，所以我需要一种方法来像 Playstore 那样始终将每个元素对齐到一边。有什么想法吗？
基本上，去 playstore 并在任何 carousal 上滑动。每件物品一个接一个地出现，然后弹到一边。我该如何重新创建它？
谢谢！
scroll-snap-stop: always; 似乎可以解决问题。它会在每个可能的 scroll-snap 点停止滚动容器。默认值设置为 normal，不会停止正文滚动。
MDN 参考 - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop
兼容性 - 它与几乎所有主流浏览器兼容，Firefox 和 Firefox for Android 除外（由于 bug 1312165）
我正在尝试在 HTML 中重新创建 Google 的 Playstore 设计。我已经使我的容器水平滚动，然后添加 scroll-snap-type: x proximity; 和 scroll-snap-align: start; 以使元素在滚动时对齐。但是，由于滚动速度太快，只有第三个或第四个元素会卡住。我知道滚动速度不应该被代码篡改，所以我需要一种方法来像 Playstore 那样始终将每个元素对齐到一边。有什么想法吗？
基本上，去 playstore 并在任何 carousal 上滑动。每件物品一个接一个地出现，然后弹到一边。我该如何重新创建它？
谢谢！
scroll-snap-stop: always; 似乎可以解决问题。它会在每个可能的 scroll-snap 点停止滚动容器。默认值设置为 normal，不会停止正文滚动。
MDN 参考 - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop
兼容性 - 它与几乎所有主流浏览器兼容，Firefox 和 Firefox for Android 除外（由于 bug 1312165）