Mobile Safari中的背景颜色和橡皮筋滚动 [英] Background color and rubber-band scrolling in Mobile Safari
问题描述
我正在Mobile Safari中构建一个网页，其中包含一个固定的页眉/页脚和橡皮筋滚动的主要内容： data-lang =jsdata-hide =falsedata-console =falsedata-babel =false>
html，body {margin：0 0;身高：100％;宽度：100％;溢出：自动; } .header，.footer {height：50px;位置：固定; z-index：100;宽度：100％; } .header {top：0;背景颜色：＃44677F; } .footer {bottom：0;背景颜色：＃4E3AFF; } .container {height：100％;溢出：自动; -webkit-overflow-scrolling：touch; } .content {background-size：50px 50px; background-color：＃D0FCFF; background-image：线性渐变（＃9DC9FF 50％，透明50％，透明）;身高：2000px; }
<！DOCTYPE html>< html>< ; HEAD> < meta charset =utf-8> < meta name =viewportcontent =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 {
背景：线性渐变（至底部，＃44677F 50％，＃4E3AFF 50％）;
}
但没有用。
解决方案的一种方法是在内容后面添加固定元素，一个元素用于顶部，一个用于底部，背景颜色与您的页眉/页脚。
#headerBackground {
position：fixed;
top：0;
right：0;
bottom：0;
身高：50％;
background-color：＃{headerColor}
}
#footerBackground {
position：fixed;
bottom：0;
right：0;
bottom：0;
身高：50％;
背景颜色：＃{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来获取页眉/页脚后面的内容。
I'm building a webpage in Mobile Safari with a fixed header/footer and rubber-band scrolling in the main content:
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>
How can I can change the background color of the area visible during the rubber-band scrolling?
I'd like use the same colors of the header/footer, so that when I scroll up:
and when I scroll down:
I know that is possible to change the entire color of the scrolling areas by setting a background color in the body:
.body {
background-color: rebeccapurple;
}
so I tried to use a gradient:
.body {
background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%);
}
but it didn't work.
One way you could achieve this is by adding fixed elements behind your content, one element for the top and one for the bottom with the same background colors as your header/footer.
#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>
You may need to play around with z-index to get thing to be behind the header/footer.
这篇关于Mobile Safari中的背景颜色和橡皮筋滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
