Set color for extra page parts visible during rubb

Question

At least when you scroll over the edge on mac, you see the page moving down and leaving a plain color behind it. Iv'e figured out the you can change the color by setting the background color of the body. But is there any other approach to it? Because sometimes I need a different colors at top and bottom, etc.

Answer 1

I need to achieve something similar.

The solution posted by @tksb doesn't work for me on Chrome (OS X), seems like Chrome uses the background-color to define the rubber band background, and ignores the background-image.

The solution I've found is to use a bit of JS

// create a self calling function to encapsulate our code
(function(document, window) {
  // define some variables with initial values
  var scrollTop   = 0;
  var resetTimer  = null;
  
  // this function gets called when you want to
  //reset the scrollTop to 0
  function resetScrollTop() {
    scrollTop = 0;
  }

  // add an event listener to `body` on mousewheel event (scroll)
  document.body.addEventListener('mousewheel', function(evt) {
    // on each even detection, clear any previous set timer
    // to avoid double actions
    window.clearTimeout(resetTimer);
    
    // get the event values
    var delta = evt.wheelDelta;
    var deltaX = evt.deltaX;

    // add the amount of vertical pixels scrolled
    // to our `scrollTop` variable
    scrollTop += deltaX;
    
    console.log(scrollTop);
    
    // if user is scrolling down we remove the `scroll-up` class
    if (delta < 0 && scrollTop <= 0) {
      document.body.classList.remove('scroll-up');
    }
    // otherwise, we add it
    else if (delta > 0 && scrollTop > 0) {
      document.body.classList.add('scroll-up');
    }
    
    // if no wheel action is detected in 100ms,
    // we reset our `scrollTop` variable
    window.setTimeout(resetScrollTop, 100);
  });
})(document, window);

body {
  margin: 0;
}
body.scroll-up {
  background-color: #009688;
}
section {
  min-height: 100vh;
  background-color: #fff;
}
header {
  height: 100px;
  background-color: #009688;
  color: #fff;
}

    

<section id="section">
  <header>
    this demo works only on full-screen preview
  </header>
</section>

Here a full screen demo to test it: http://s.codepen.io/FezVrasta/debug/XXxbMa

Answer 2

My solution has been to cheat a little bit and use a linear-gradient() on the html or body tag to control the segmented background colors for a given project.

Something like this should split the background in half and take care of modern browsers.

background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.5, #8BC63E),
    color-stop(0.5, #EEEEEE)
);
background: -o-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -moz-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -webkit-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -ms-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: linear-gradient(to bottom, #8BC63E 50%, #EEEEEE 50%);

I've had mixed luck getting the same behavior on iOS, and seems to be more dependent on the specific layout.