Question

考虑以下情况：

你有2个可滚动的元素。

附在$（document）.scroll（）
一个单独的容器/叠加层，用于侦听$（＆＃34; .class＆＃34;）。scroll（）

使用以下CSS属性。

body {
overflow-y: scroll;
height: 100%;
}

.class {
height: 100%; /* 50% 20% 200px whatever you may */
position: fixed;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

换句话说，一个非常标准的设置，在 2017中应该在任何设备上都没有任何问题。错误。

以下是我多年来通过这种简单设置所遇到的问题，从未找到一个好的，可靠的解决方案：

当100％高度滚动到叠加层的顶部或底部时，叠加层会从轻微到极端闪烁，无论所有iDevices的HTML复杂性如何。（由于z-index问题有过度滚动或硬件加速问题，我不知道）。
当在顶部或底部时，滚动完全停止覆盖，以便等待身体滚动停止过度滚动。
当滚动错误地停止了容器（whilist过度滚动开始），并且用户继续滚动时，主体将滚动，导致非常不一致的用户体验，因为用户现在将在某处结束在打开叠加层之前，身体卷轴中的其他内容也是如此。为了等待过度滚动停止，必须停止滚动也很烦人。
如果容器是100％高度，没有滚动 - 如果用户启动滚动，身体将滚动和滚动条将可见，但该页面似乎没有滚动，导致用户不一致经验。

我尝试过的一些解决方案没有取得任何成功。

iScroll。 iScroll通过阻止文档上的任何触摸事件来停止过度滚动问题。但是提供不一致和糟糕的滚动体验imho。此外，它甚至不再需要了。
可以想象的其他滚动插件。
事件委派 - 尝试仅为正在与之交互的元素启用滚动。适用于桌面。不是移动游猎。
每个可以想象的jQuery滚动辅助工具。轻微的成功，但非常不一致。

似乎无论过去提出过什么样的解决方案，都会因为各种原因而被贬低。（不要故意听起来阴谋。）

几周前我读到Apple正在研究更新滚动webkit使其在所有类型中更加同质在iPhone上提供的内容类型。但在此之前，这个简单的设置在移动Safari上仍然存在很大问题。

我可能最终想出了解决方案。但我很好奇听到其他人在2017年如何解决这个问题......

更新2018 for WebView Apps 虽然Apple在解决这个问题上没有做出任何努力，但如果你正在构建webview应用程序，绝对最好的解决方案来彻底根除任何问题是完全直接在Swift中完全禁用浏览器滚动（webview）

加载WebView后，只需使用：

    override func viewDidLoad() {
        super.viewDidLoad()
        wkWebView1.scrollView.isScrollEnabled = false
        wkWebView1.scrollView.bounces = false
}

然后在CSS中为每个需要滚动的容器单独滚动。

请注意，此解决方案将完全禁用$（document）.scroll（）。

我希望它有所帮助。

Answer 1

我会在这里添加一条评论，因为这看起来像是最近的，很好的问题概述（谢谢！）

我也尝试过你所说的一切，并最终找到了解决方案。基本上，您需要设置主容器和叠加层的大小，同时将它们设为fixed并赋予它们overflow: auto，以便文档本身不会滚动。

当叠加层关闭时，内容会在保持放置的主容器内滚动。（使用height: 100vh; width: 100vw;或top/left/bottom/right: 0;以及box-sizing: border-box;有助于使其不引人注目。）
当您打开叠加层时，将主容器切换到overflow: hidden，此时叠加层内的内容会滚动。同样，文件本身也不会。

这有一个缺点：地址栏永远不会隐藏在iOS上。我相信它仍然是一种更好的体验，因为它始终如一。

此外，如果您从可滚动区域外部开始滚动，则会获得焦点，iOS的橡皮筋效果会阻止与页面的后续交互，直到它完成橡皮筋。（其他地方还有一些帖子解释了如何对付它 - 你监视滚动事件并在元素到达顶部时将元素向下推1px，如果在底部则向上推1px。）

这是一个演示（codepen here）：

let openBtns = document.getElementsByClassName('open'),
    closeBtns = document.getElementsByClassName('close'),
    overlay = document.getElementById('overlay');


for (let btn of openBtns) {
    btn.onclick = () => {
        document.body.classList.add('overlay-open');
        overlay.setAttribute('aria-hidden', false);
    };
}

for (let btn of closeBtns) {
    btn.onclick = () => {
        document.body.classList.remove('overlay-open');
        overlay.setAttribute('aria-hidden', true);
    };
}

#page, #overlay {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    box-sizing: border-box;
    overflow: auto;
    font-size: 4em;
    -webkit-overflow-scrolling: touch;
}

#page {
    padding: 1rem 2rem 2rem;
}

.overlay-open > #page {
    position: fixed;
    filter: blur(5px);
    overflow: hidden;
    pointer-events: none;
}

#overlay {
    display: none;
    padding: 2rem;
    font-size: 2em;
}

#overlay > .content {
    position: relative;
    width: 20em;
    margin: auto;
    padding: 0 1rem 1rem;
    background-color: rgba(200, 0, 255, 0.5);
}

.overlay-open > #overlay {
    display: block;
}

<body>
    <div id="page">
        <div class="content">
            <button class="open">Open overlay</button>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
            <button class="open">Open overlay</button>
        </div>
    </div>
    <div id="overlay" aria-hidden="true">
        <div class="content">
            <button class="close">Close overlay</button>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
            <button class="close">Close overlay</button>
        </div>
    </div>
</body>

（请注意，那里有一些CSS只是片段在这里或Codepen上有意义所必需的，基本上所有与位置/溢出无关的内容都是为了显示;它应该很容易弄清楚但是随意要求澄清。）

一个简单的解决方案，以防止滚动问题移动safari（iOS）

1 个答案: