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

Posted 2023-03-04

【中文标题】为啥我的网站在 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;