logo标签列表

有没有一种方法可以为iOS Safari的过度滚动/弹性滚动区域添加样式？

csssafariwebkit
15
在iOS Safari中，当您滚动到网页底部时，您可以尝试再次滚动来实现对页面的“抬起”。我认为这是为了向用户确认他们已经到达页面底部。默认情况下，该区域为空白和白色。是否有一种方法可以使用CSS样式来更改此区域？我想增加一个背景图片以添加视觉效果。由于其他每个人都在问如何防止过度滚动，我想知道我是否可以将其用于其他方面。
我尝试将背景图片添加到body标签并将其固定到底部，但它无法通过过度滚动显示。我感觉这可能是不可能的，因为它是Safari本身的一部分，并且网页（及其控件）已经结束。
我认为这个问题，https://dev59.com/QH3aa4cB1Zd3GeqPhLp_，可能是你正在寻找的。可悲的是，听起来你对此没有任何控制。 - James McMahon
2个回答
11

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

最近Safari使用了"theme-color"元标记来实现这一功能。

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

  <meta name="theme-color" content="#f6f8fa" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#161b22" media="(prefers-color-scheme: dark)">
9
几年后，我发现这是有些可能的，可以使用固定定位和z-index。假设您的内容高度大于您的屏幕高度，并且您的内容包含在一个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>
1
这个很好用！我的应用程序顶部和底部固定面板有不同的颜色，因此定义单个主题颜色是行不通的。在初始的iPhone测试中，我现在看到了一个自定义颜色，在iOS弹性滚动到极限时打开的空间中。 - Kalnode
不幸的是，在OSX Safari中，固定元素会随着弹性过度滚动而拖动（在触控板或苹果鼠标上发生），因此这个修复只适用于iOS。 - robbe clerckx
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接