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);
    });