我正在 Mobile Safari 中构建一个网页，其中包含固定的页眉/页脚和主要内容中的橡皮筋滚动:
html,
body {
margin: 0 0;
height: 100%;
width: 100%;
overflow: auto;
}
.header,
.footer {
height: 50px;
position: fixed;
z-index: 100;
width: 100%;
}
.header {
top: 0;
background-color: #44677F;
}
.footer {
bottom: 0;
background-color: #4E3AFF;
}
.container {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.content {
background-size: 50px 50px;
background-color: #D0FCFF;
background-image: linear-gradient(#9DC9FF 50%, transparent 50%, transparent);
height: 2000px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>
<body>
<header class="header"></header>
<div class="container">
<div class="content"></div>
</div>
<footer class="footer"></footer>
</body>
</html>如何更改橡皮筋滚动过程中可见区域的背景颜色？
我想使用与页眉/页脚相同的颜色，这样当我向上滚动时:
当我向下滚动时:
我知道可以通过在正文中设置背景颜色来更改滚动区域的整个颜色:
.body {
background-color: rebeccapurple;
}
所以我尝试使用渐变:
.body {
background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%);
}
但是没用。
最佳答案
实现此目的的一种方法是在内容后面添加固定元素，一个元素用于顶部，一个元素用于底部，背景颜色与页眉/页脚相同。
#headerBackground {
position: fixed;
top: 0;
right: 0;
bottom: 0;
height: 50%;
background-color: #{headerColor}
}
#footerBackground {
position: fixed;
bottom: 0;
right: 0;
bottom: 0;
height: 50%;
background-color: #{footerColor}
}
<body>
<div id="footerBackground "></div>
<div id="headerBackground "></div>
<header class="header"></header>
<div class="container">
<div class="content"></div>
</div>
<footer class="footer"></footer>
</body>
您可能需要使用 z-index 来让页眉/页脚后面的东西。
关于html - Mobile Safari 中的背景颜色和橡皮筋滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36924410/