Geek Answers Handbook

Background color and scrolling rubber bands in Mobile Safari

I am creating a web page in Mobile Safari with a fixed header / footer and scrollbar 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 change the background color of the area visible while scrolling the rubber band?

I would like to use the same colors in the header and footer so that when scrolling up:

header

and when scrolling down:

footer

I know that you can change the entire color of the scroll areas by setting the background color in the body:

 .body { background-color: rebeccapurple; }

so I tried using a gradient:

 .body { background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%); }

but it didn’t work.

+6
source share
1 answer

One way to achieve this is to add fixed elements behind your content, one element for the top and one for the bottom color 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 make things stand behind the header / footer.

0
source

More articles:


All Articles