Javascript eventListener 滚动仅在向下滚动时有效，在向上滚动时无效

Question

我几乎没有使用 HTML/CSS/JS 的经验，所以大部分都是复制粘贴的。我正在使用一个名为 cargo 的网站建设服务。我正在尝试根据用户的滚动位置更改背景颜色。从顶部开始向下滚动时，一切都完美无缺。但是向上滚动根本不允许颜色改变（到达顶部后“主体”颜色除外）。

HTML/JS:

<script>
    function changeBackground(){
        if(scrollY >= 300 && scrollY < 900)    {
        document.body.classList.add('bg-color');
        }  
      
        else if(scrollY >= 900 && scrollY < 1900){
          document.body.classList.add('bg-color-orangeyellow');
          }
        else if(scrollY >=1900 && scrollY < 2700){
            document.body.classList.add('bg-color-white');
            } 
        
        else{  
            document.body.classList.remove('bg-color');
          document.body.classList.remove('bg-color-orangeyellow');
            document.body.classList.remove('bg-color-white');
    
        
          }
        }
        addEventListener('scroll', changeBackground); 
    </script>

CSS:

body {
    background-color:rgb(166, 199, 255);
    transition: all 0.5s ease;
  }
.bg-color{
    background-color: #11923d;
    
}
.bg-color-orangeyellow{
    background-color: #ffb217;
        
}
.bg-color-white{
    background-color: white;

Answer 1

问题在于，在每个 if 语句中，您都在添加类而不是删除它们。

一个选项是在每个 if 语句中删除另一个类，您也可以只使用内联样式设置背景颜色，而不是像这样打开和关闭这些类所以：

    function changeBackground(){
        const bodStyle = document.body.style;
        if(scrollY >= 300 && scrollY < 900)    {
          bodStyle.backgroundColor = '#11923d';
        }  
      
        else if(scrollY >= 900 && scrollY < 1900){
          bodStyle.backgroundColor = '#ffb217';
          }
        else if(scrollY >=1900 && scrollY < 2700){
          bodStyle.backgroundColor = '#ffffff'
        }
        else{  
          bodStyle.backgroundColor = 'rgb(166, 199, 255)';
          }
        }
        document.addEventListener('scroll', changeBackground);

body {
    background-color: rgb(166, 199, 255);
    transition: all 0.5s ease;
    height: 5000px;
  }

注意：我只将高度添加到 CSS，这样您就可以在代码片段中滚动。

Answer 2

基本上你的代码存在于匹配的第一个条件块上并且 else 没有被调用，所以当你返回时那些类不会被删除。您可以像这样使您的代码更加动态。

function changeBackground() {
  const positions = [{
      dist: (scrollY >= 300) && (scrollY < 900),
      cls: 'bg-color'
    },
    {
      dist: (scrollY >= 900) && (scrollY < 1900),
      cls: 'bg-color-orangeyellow'
    },
    {
      dist: (scrollY >= 1900) && (scrollY < 2700),
      cls: 'bg-color-white'
    }
  ]

  positions.forEach(({
    dist,
    cls
  }) => {
    const action = dist ? 'add' : 'remove'
    document.body.classList[action](cls)
  })


}

addEventListener('scroll', changeBackground);

body {
  background-color: rgb(166, 199, 255);
  transition: all 0.5s ease;
  height: 2700px;
}

.bg-color {
  background-color: #11923d;
}

.bg-color-orangeyellow {
  background-color: #ffb217;
}

.bg-color-white {
  background-color: white;
}

Javascript eventListener 滚动仅在向下滚动时有效，在向上滚动时无效

Javascript eventListener scrolling only works when scrolling down, not when scrolling up

javascript

scroll

background

event-listener