7

无论我更改 scroll-snap-type 还是 scroll-snap-align，Safari 都会丢失滚动位置并从第一个 scroll-snap 元素开始。这个问题可以在这里的滚动示例中轻松重现：https ://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type 。只需切换到 scroll-snap-type: 强制，滚动到第二个或第三个元素。然后切换到 scroll-snap-type: none 并再次返回到 scroll-snap-type: 强制。在所有浏览器中滚动位置保持不变，在 Safari 中它又从 0 开始。

为什么我需要这个？我正在使用改变 scrollTop 位置的滚动动画。在 Safari 中使用滚动捕捉时，动画不起作用，例如，当单击导航链接滚动到另一个部分时。所以我的想法是在使用导航链接时关闭滚动捕捉，并在完成后再次打开它。在所有浏览器中都可以正常工作，导致 Safari 中出现描述的问题。我也尝试更改滚动对齐对齐，但它是一样的。

有人遇到过同样的问题吗？您找到解决方法/解决方案了吗？

4

4 回答 4

2

同样的问题 - 请问您是否找到了解决方案？我的做法是简单地禁用 Safari 的滚动捕捉，从而减少用户舒适度的影响......用更少的代码编写：

scroll-snap-type: y mandatory; // vertical scroll-snap
@media not all and (min-resolution:.001dpcm) { // detect Safari
    scroll-snap-type: unset;
}
于 2021-03-23T18:15:17.843 回答
2

我遇到了同样的问题。最终对我有用的是overflow: hidden在更改scroll-snap-type. 这可以防止容器被手动滚动，并且似乎也可以防止 Safari 重置滚动位置。滚动动画完成后，您可以恢复scroll-snap-type和删除overflow: hidden.

我通过创建一个新类来做到这一点：

.disable-snapping
  overflow: hidden;
  scroll-snap-type: none;

对我有用的确切步骤是：

  1. 在滚动动画开始之前，将disable-snapping类添加到可滚动容器中。
  2. 做滚动动画。
  3. 动画完成后，删除disable-snapping该类。
于 2021-06-18T22:18:39.187 回答
1

我也有同样的经历，因为我想实现拖动。我决定失去拖动功能。我解决了您的问题scroll-behavior: smooth;并使用了锚链接。

你可以在这里找到我的代码：https ://codepen.io/joosts/pen/MWJBPgo?editors=0110

于 2021-04-23T21:09:17.587 回答
1

刚遇到同样的问题。非常烦人.. 但是在重新启用滚动捕捉行为后重置滚动位置效果非常好。

const onDragEnd = () => {
    const scroller = $('.scroll-container');
    const scrollLeft = scroller.scrollLeft();
    scroller.removeClass('drag-in-progress'); // this class disabled scroll-snapping
    requestAnimationFrame(() => scroller.scrollLeft(scrollLeft));
};
于 2021-05-31T16:52:48.297 回答