设置在橡皮筋滚动期间可见的额外页面部件的颜色 [英] Set color for extra page parts visible during rubber band scroll

问题描述

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

解决方案

@tksb发布的解决方案在Chrome（OS X）上不适用于我，似乎Chrome使用 background-color 定义橡皮筋背景，忽略 background-image 。

我发现的解决方案使用一些JS

  //创建自调用函数封装我们的代码（function（document，window）{//用初始值定义一些变量var scrollTop = 0; var resetTimer = null; //当你想//将scrollTop重置为0时调用函数resetScrollTop在滚动事件（scroll）上添加一个事件监听器到body上document.body.addEventListener（'mousewheel'，function（evt）{//在每个偶数检测，清除任何先前设置的定时器//避免双重操作window.clearTimeout（resetTimer）; //获取事件值var delta = evt.wheelDelta; var deltaX = evt.deltaX; // add the amount of vertical pixels scrolled // to our`scrollTop` variable scrollTop + = deltaX; console.log（scrollTop）; //如果用户向下滚动，我们删除`scroll-up`类if（delta< 0&& scrollTop< = 0）{document.body.classList.remove（'scroll-up'）; } //否则，我们添加它else if（delta> 0&&& scrollTop> 0）{document.body.classList.add（'scroll-up'）; } //如果在100ms中没有检测到轮子动作，//我们重置我们的`scrollTop`变量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>此演示仅适用于全屏预览 

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

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.

解决方案

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

这篇关于设置在橡皮筋滚动期间可见的额外页面部件的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！