Safari浏览器在更改scroll-snap-type或scroll-snap-align时失去滚动位置

Question

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

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

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

Answer 1

这里也有同样的问题--我想问一下你是否找到了解决方案？我的想法是简单地禁用Safari的滚动捕捉，这样会降低用户的舒适度……用更少的代码写成：

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

Answer 2

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

为此，我创建了一个新类：

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

对我有效的具体步骤是：

在滚动动画开始之前，将disable-snapping类添加到可滚动容器中。

• 执行滚动操作动画已完成，删除disable-snapping类。

Answer 3

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

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