有没有办法设置 iOS Safari 过度滚动/弹性滚动区域的样式？答案

【问题标题】：Is there a way to style the iOS Safari overscroll/elastic scroll area?有没有办法设置 iOS Safari 过度滚动/弹性滚动区域的样式？
【发布时间】：2016-10-09 14:56:03
【问题描述】：

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

【问题讨论】：

我认为问题，stackoverflow.com/questions/22477729/…，可能是你要找的。可悲的是，听起来您无法控制它。

标签： css safari webkit

【解决方案1】：

我知道这是一个老话题，但它仍然首先出现在我的搜索结果中。

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

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

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

【讨论】：

【解决方案2】：

几年后，我发现这是（某种）可能的，使用固定定位和 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>

【讨论】：

这很好用！我的应用程序的顶部和底部固定面板具有不同的颜色，因此定义单一主题颜色不起作用。在最初的 iPhone 测试中，当你达到 iOS 弹性滚动的极限时，我现在在空间中看到一种自定义颜色。