Question

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

Answer 1

几年后，我发现使用固定定位和z索引可以（排序）。假设您的内容高度大于屏幕高度并且您的内容包含在div中，如果您将某些内容放在具有以下类的另一个div中，它应该出现在iOS overcroll区域中：

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

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

1 个答案: