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

hum*_*mmh 8 javascript safari scroll-snap

无论我更改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:mandatory。在所有浏览器中,滚动位置保持不变,在 Safari 中,它又从 0 开始。

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

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

小智 2

同样的问题在这里 - 请问您是否找到了解决方案?我的方法是简单地禁用 Safari 的滚动捕捉,这会降低用户舒适度……用 less 编写:

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