对于允许滚动到网站末尾的浏览器，如何在我的网站结束后更改背景颜色？
[英]How do I change the background color after the end of my website for browsers that allow you to scroll past the end of the website?
问题描述
If you use Edge or Safari on mobile (the only two I know for certain, but could be more) you will see that you are able to scroll past the end and also the top of any website before it the browser automatically pushes you back into bounds of the web page.
如果您在移动设备上使用Edge或Safari （我肯定知道只有两个，但可能更多） ，您会看到您可以滚动到任何网站的末尾和顶部，然后浏览器会自动将您推回网页的边界。 This is obviously an intended feature and a cool effect on those browsers, but it doesn't look to good when the colors arent matching.这显然是这些浏览器的预期功能和很酷的效果，但是当颜色不匹配时，它看起来并不好。
I understand that the background color which is shown is the body elements background-color .我知道显示的背景颜色是body元素background-color 。 However, this poses an issue for me.但是，这对我来说是一个问题。 If my websites background color is white, but my footer is black, it ends up looking really awkward when the color changes to white again when you scroll past the footer.如果我的网站背景颜色是白色，但我的页脚是黑色的，那么当您滚动经过页脚时颜色再次变为白色时，它最终看起来非常尴尬。 The issue gets even more tough if my navbar at the top is lets say red and I therefore need the area above my page to be red.如果我在顶部的导航栏是红色的，问题会变得更加棘手，因此我需要页面上方的区域为红色。 Is there any properties I can use to change the background color of the area above and below my page?我可以使用任何属性来更改页面上方和下方区域的背景颜色吗？ or can I position a div underneath the end of my page with black background color and if so how do I do that?或者我可以在我的页面末尾放置一个带有黑色背景颜色的 div，如果可以，我该怎么做？ or how do I solve this?或者我该如何解决？
1 个解决方案
解决方案1
1 2022-07-17 19:12:52
The first solution would be to give your <body> the background color of the footer and to then wrap your content inside a container which has the page's background color (eg white):第一个解决方案是为您的<body>提供页脚的背景颜色，然后将您的内容包装在具有页面背景颜色（例如白色）的容器中：
<body style="background: var(--footer-background)">
<main style="background: var(--content-background)">
<!-- main content -->
</main>
<footer>
<!-- footer content -->
</footer>
</body>
I tested this on both Safari and Edge on an iPad.我在 iPad 上的 Safari 和 Edge 上对此进行了测试。
In Safari, you can also use the theme-color meta attribute to specify the color of the overscroll area:在 Safari 中，您还可以使用theme-color元属性来指定过度滚动区域的颜色：
<meta name="theme-color" content="#4285f4">
However, this did not seam to work on Edge and is only supported on Safari sinceversion 15 with " compact tabs " enabled .但是，这在 Edge 上无法正常工作，并且仅在 Safari版本 15后才支持，并且启用了“紧凑标签” 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.