对于允许滚动到网站末尾的浏览器，如何在我的网站结束后更改背景颜色？

Question

如果您在移动设备上使用Edge或Safari （我肯定知道只有两个，但可能更多） ，您会看到您可以滚动到任何网站的末尾和顶部，然后浏览器会自动将您推回网页的边界。 这显然是这些浏览器的预期功能和很酷的效果，但是当颜色不匹配时，它看起来并不好。

我知道显示的背景颜色是body元素background-color 。 但是，这对我来说是一个问题。 如果我的网站背景颜色是白色，但我的页脚是黑色的，那么当您滚动经过页脚时颜色再次变为白色时，它最终看起来非常尴尬。 如果我在顶部的导航栏是红色的，问题会变得更加棘手，因此我需要页面上方的区域为红色。 我可以使用任何属性来更改页面上方和下方区域的背景颜色吗？ 或者我可以在我的页面末尾放置一个带有黑色背景颜色的 div，如果可以，我该怎么做？ 或者我该如何解决？

Answer 1

第一个解决方案是为您的<body>提供页脚的背景颜色，然后将您的内容包装在具有页面背景颜色（例如白色）的容器中：

<body style="background: var(--footer-background)">
  <main style="background: var(--content-background)">
    <!-- main content -->
  </main>
  <footer>
    <!-- footer content -->
  </footer>
</body>

我在 iPad 上的 Safari 和 Edge 上对此进行了测试。

在 Safari 中，您还可以使用theme-color元属性来指定过度滚动区域的颜色：

<meta name="theme-color" content="#4285f4">

但是，这在 Edge 上无法正常工作，并且仅在 Safari版本 15后才支持，并且启用了“紧凑标签” 。

对于允许滚动到网站末尾的浏览器，如何在我的网站结束后更改背景颜色？

问题描述

1 个解决方案

解决方案1
1 2022-07-17 19:12:52

对于允许滚动到网站末尾的浏览器，如何在我的网站结束后更改背景颜色？

问题描述

1 个解决方案

解决方案1 1 2022-07-17 19:12:52

解决方案1
1 2022-07-17 19:12:52