在iOS Safari中,当您滚动到网页底部时,您可以通过尝试再次滚动来"抬起"页面.我假设这是为了向用户保证他们已经到达页面的末尾.默认情况下,此区域为空白.有没有办法用CSS设计这个区域？我想添加一个背景图片,如果只是为了增加天赋.而且由于其他人都在问如何防止过度滚动,我想知道我是否真的可以将它用于某些事情.我尝试将一个背景图像添加到body标签并将其固定到底部,但是通过过度滚动看不到它.我觉得它可能是不可能的,因为它是Safari本身的一部分,并且网页(及其控制)已经结束.
mat*_*asb 11
我知道这是一个老话题，但它仍然出现在我的搜索结果中。
截至最近，Safari 为此使用“主题颜色”元标记。
例如，如果您使用多个主题：
<meta name="theme-color" content="#f6f8fa" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#161b22" media="(prefers-color-scheme: dark)">
几年后，我发现使用固定的位置和z索引可以做到（某种程度上）。假设您的内容高度大于屏幕高度，并且内容包装在div中，则如果您将具有以下类的内容放入另一个div中，则它应出现在iOS超滚动区域中：
.ios-peek {
position: fixed;
z-index: -1;
bottom: 0;
left: 0;
}
这是概念验证页面，即使内容比屏幕高度短，该页面也试图做到这一点：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
* {
margin: 0;
}
#content {
min-height: 100vh;
height: 100%;
background-color: #fff;
}
#bottom-text {
position: absolute;
bottom: 0;
}
.ios-peek {
position: fixed;
z-index: -1;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<h1>Blah</h1>
<p>Blah blah blah blah blah blah blah blah blah...</p>
</div>
<div id="bottom-text">
<h3>You're at the bottom, nothing else to see...</h3>
</div>
<div class="ios-peek">
<h1>hi there</h1>
</div>
</body>
</html>