移动端 Safari 上的滚动捕捉在 dom 更改时保持位置

Question

我遇到了仅在 Safari 移动设备上出现的问题。在 Chrome 移动设备上，它可以按预期工作。

我正在编写一个单页应用程序。 它是由几个容器组成的。当时只有一个可见。它们使用 jQuery

show

和

hide

函数显示和隐藏。 容器可以（但不总是）由部分构建。每个部分都应占据整个屏幕，用户可以通过滚动在它们之间切换。

基本上代码如下所示：

html {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;
}

.section {
    position: relative;
    max-width: 100vw;
    max-height: 100vh !important;
    scroll-snap-align: start;
    overflow: hidden;
}

<div class="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>
<div class="container"></div>
<div class="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

发生了什么：

1. 用户滚动到第一个容器中的第三部分
2. 第一个容器被隐藏，第二个容器被显示
3. 第二个容器被隐藏，第三个容器被显示

此时第三个容器的第三部分已显示！

我假设浏览器以某种方式保留了滚动的位置。直到我实现了快照，这才发生。

有时在显示容器后，其含义可能会有所不同，而有时会显示最后一部分。

我想控制向用户呈现的内容。我希望默认情况下始终是第一部分，但也能够从 js 代码中定义的特定部分开始。

Answer 1

我尝试在 Chrome 上重新创建它，因为我无法在 iOS Safari 上测试它，并怀疑这与你的第二个容器中没有任何部分有关。由于scroll-snap-align是在部分而不是容器上设置的，因此它会搜索下一个滚动点以将其自身对齐到第三个容器中的第一个部分。

    html {
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: none;
    }

    .section {
        position: relative;
        min-width: 100vw;
        min-height: 100vh !important;
        scroll-snap-align: start;
        overflow: hidden;
    }

<div class="container">
    <div class="section">1.1</div>
    <div class="section">1.2</div>
    <div class="section">1.3</div>
</div>
<div class="container section">2</div>
<div class="container">
    <div class="section">3.1</div>
    <div class="section">3.2</div>
    <div class="section">3.3</div>
</div>