时间戳

首页 > 解决方案 > IOS上的滚动问题

css - IOS上的滚动问题

问题描述

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

在android上它工作得很好，但在ios上它有时会卡住。我无法滚动，页面弹跳，经过一些尝试，问题停止了。

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

有谁知道可能是什么原因造成的？

标签： cssiosscroll

解决方案

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

例如 css，将 "===" 作为类 ".info" 的伪元素：

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

例如jQuery，在滚动时将类“scrolling”添加到类“.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);
    });

推荐阅读