更改 scroll-snap-type 或 scroll-snap-align 时 Safari 浏览器丢失滚动位置答案

【问题标题】：Safari browser is loosing scroll position when changing scroll-snap-type or scroll-snap-align更改 scroll-snap-type 或 scroll-snap-align 时 Safari 浏览器丢失滚动位置
【发布时间】：2021-04-15 14:49:31
【问题描述】：

无论我更改 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 中出现描述的问题。我也尝试改变 scroll-snap-align ，但它是一样的。

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

【问题讨论】：

这个问题在 iOS 15 中不会持续存在，但是对于 15 以下的版本肯定会有修复

标签： javascript safari scroll-snap

【解决方案1】：

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

scroll-snap-type: y mandatory; // vertical scroll-snap
@media not all and (min-resolution:.001dpcm) { // detect Safari
    scroll-snap-type: unset;
}

【讨论】：

最后我在滚动动画开始之前关闭了Javascript中的滚动捕捉，并在滚动动画结束时再次打开它。我认为这更像是一种解决方法，而不是适当的解决方案。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

const onDragEnd = () => {
    const scroller = $('.scroll-container');
    const scrollLeft = scroller.scrollLeft();
    scroller.removeClass('drag-in-progress'); // this class disabled scroll-snapping
    requestAnimationFrame(() => scroller.scrollLeft(scrollLeft));
};

【讨论】：

【解决方案4】：

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

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

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

对我有用的具体步骤是：

在滚动动画开始之前，将disable-snapping 类添加到可滚动容器中。
做滚动动画。
动画完成后，删除disable-snapping 类。

【讨论】：