为啥我的网站在 Mac 上的 safari 上滚动过度?

Posted

技术标签:

【中文标题】为啥我的网站在 Mac 上的 safari 上滚动过度?【英文标题】:Why does my website over-scrolls on safari on a mac?为什么我的网站在 Mac 上的 safari 上滚动过度? 【发布时间】:2022-01-15 20:37:17 【问题描述】:

我目前正在创建一个网站,当我在 safari 上查看它时,它严重过度滚动。此问题仅发生在 Mac 上的 safari 上(而不是 iPhone 上)。当我使用其他浏览器(例如 Chrome)时,该网站也显示正常。

我尝试向 CSS 文件添加限制,例如 overscroll-behavior: none; 我用开发人员工具检查了网站,在那里我发现了两个导致问题的 div,但它们似乎不是我的代码的一部分,因此我不知道它们是在哪里生成的 基本上我想要的是页面停在页脚底部。

foto of overscroll beyond footer

source of problem

【问题讨论】:

你已经尝试过什么?你有截图吗? “过度滚动”是什么意思?你想要完成什么?你想要完成的事情出了什么问题? 我尝试向 CSS 文件添加限制,例如 overscroll-behavior: none;,然后我使用开发人员工具检查了网站,在那里我发现了两个导致问题的 div,但它们似乎不是其中的一部分我的代码,因此我不知道它们是在哪里生成的基本上我想要的是页面停在页脚的底部。 请在帖子中添加说明。 请提供足够的代码,以便其他人更好地理解或重现问题。 【参考方案1】:

我能够通过使用 <header> </header> 容器包装标题图像并从

重定向 CSS 命令来解决问题
html, body 
    width: 100%;
    height: 100%;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    


body > div
    width: 100%;
    height: 100%;
    background-image: url(../Images/Background-1.jpg);
    background-size: cover;
    position: relative;
    background-attachment: fixed;

改为:

html, body, header 
    width: 100%;
    height: 100%;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    


header > div
    width: 100%;
    height: 100%;
    background-image: url(../Images/Background-1.jpg);
    background-size: cover;
    position: relative;
    background-attachment: fixed;

【讨论】:

以上是关于为啥我的网站在 Mac 上的 safari 上滚动过度?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 Web 应用在 iOS(Chrome 和 Safari)上滚动超级慢,但在所有其他平台上都可以?

如何在 iOS Safari 上启用 iframe 滚动条

为啥简单的网站会在移动设备上崩溃(至少是 iOS Safari 和 Chrome)?

如何用MAC上的Safari检查iPhone手机App运行的Html页面

你能测试一下 Safari 和 Chrome (iOS) 上的滚动差异吗?

Mac 上的“没有 Safari 扩展证书”错误