Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background color and rubber-band scrolling in Mobile Safari

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:

header

and when I scroll down:

footer

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.

like image 520
Paul Avatar asked Apr 28 '16 20:04

Paul


1 Answers

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.

like image 65
Jim Bash Avatar answered Sep 22 '22 10:09

Jim Bash