如果使用Edge或移动版Safari(只有两个我知道肯定，但可能更多)你会看到，你可以滚动过去的结束和任何网站的顶部之前，它的浏览器自动推你回到网页的边界。这显然是一个有意为之的功能，在这些浏览器上是一个很酷的效果，但是当颜色不匹配时，它看起来就不太好了。
我理解显示的背景颜色是body元素background-color。然而，这给我带来了一个问题。如果我的网站背景色是白色的，但我的页脚是黑色的，当你滚动到页脚时，颜色又变成白色，看起来真的很尴尬。如果我顶部的导航栏是红色的，那么问题就变得更加棘手了，因此我需要页面上方的区域是红色的。是否有任何属性可以用来更改页面上下区域的背景颜色?或者我可以在页面末尾放置一个黑色背景的div，如果可以，我该怎么做?或者怎么解?
第一个解决方案是给你的<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元属性来指定overscroll区域的颜色:
<meta name="theme-color" content="#4285f4">