有没有办法设置 iOS Safari overscroll/elastic 滚动区域的样式？

Question

在 iOS Safari 中，当您滚动到网页底部时，您可以通过尝试再次滚动将页面向上排序 "lift"。我假设这是为了向用户保证他们已经到达页面末尾。默认情况下，此区域为空白和白色。有没有办法用 CSS 来设置这个区域的样式？如果只是为了增加风格，我想添加背景图像。由于其他人都在询问如何防止过度滚动，我想知道我是否真的可以将它用于某些事情。我尝试将背景图像添加到 body 标签并将其固定到底部，但通过滚动看不到它。我觉得这可能是不可能的，因为它是 Safari 本身的一部分，并且网页（及其控件）已经结束。

Answer 1

几年后，我发现这是（某种）可能的，使用固定定位和z-indexes。假设你的内容高度大于你的屏幕高度，并且你的内容被包裹在 div 中，如果你把一些东西放在另一个 div 和下面的 class 它应该出现在 iOS 滚动区域：

.ios-peek {
    position: fixed;
    z-index: -1;
    bottom: 0;
    left: 0;
}

这是一个 proof-of-concept 页面，即使内容比屏幕高度短也能实现这一点：

<!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>

Answer 2

我知道这是一个老话题，但它仍然在我的搜索结果中排在第一位。

最近 safari 为此使用“主题颜色”元标记。

例如，如果您使用多个主题：

  <meta name="theme-color" content="#f6f8fa" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#161b22" media="(prefers-color-scheme: dark)">

有没有办法设置 iOS Safari overscroll/elastic 滚动区域的样式？

Is there a way to style the iOS Safari overscroll/elastic scroll area?

css

safari

webkit