IOS上的滚动问题

Question

我在使用IOS Safari时遇到滚动问题。该网站有一个固定的顶部和底部，大量的图像，包括伪元素(前后)作为背景，以及一些相对位置和负边距。

在android上，它工作得很好，但在ios上，它有时会卡住。我无法滚动，页面弹了起来，尝试了几次后，问题就停止了。

我在body和html元素上也有一个"overflow-x: hidden“。

有人知道这可能是什么原因吗？

Answer 1

iOS浏览器(包括Chrome和Safari)有一个错误，即滚动后css伪元素可能会消失。有一个技巧需要修复:在滚动过程中删除伪css，并在滚动完成后将其放回原处。

示例css，将"===“作为伪元素放到类".info”中：

.info:not(.scrolling) {
content: "===";
}

示例jQuery，在滚动时向.info类添加滚动类，滚动完成后删除该类：

let isscrolling = null;

    $(".info").on("scroll",function (e) {
        if(isscrolling){
            clearTimeout(isscrolling);
        }
        $(".info").addClass("scrolling");
        isscrolling = setTimeout(function(){
            $(".info").removeClass("scrolling");
            isscrolling = null;
        },100);
    });