在橡皮筋滚动期间设置可见的额外页面部分的颜色

Question

至少当您在Mac上滚动边缘时,您会看到页面向下移动并在其后面留下纯色.我想你可以通过设置背景颜色来改变颜色body.但还有其他方法吗？因为有时候我需要在顶部和底部有不同的颜色等.

Answer 1

我的解决方案一直骗一点点,使用linear-gradient()上html或body标签来控制分段的背景颜色为给定的项目.

这样的事情应该将背景分成两半并照顾现代浏览器.

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%);

我在iOS上获得了相同的行为,并且似乎更依赖于特定的布局.

Answer 2

我需要实现类似的东西.

@tksb发布的解决方案在Chrome(OS X)上对我不起作用,似乎Chrome使用它background-color来定义橡皮筋背景,而忽略了background-image.

我发现的解决方案是使用一些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>

这里有一个全屏演示来测试它:http: //s.codepen.io/FezVrasta/debug/XXxbMa