Question

我目前有一个滚动事件，当向下滚动时会改变背景。但是，我希望一旦页面滚动或定位到顶部，背景就会恢复为原始颜色。我该怎么做呢？这是我的一些代码：

await my_future

Answer 1

检测滚动位置

var currentPosition = 0;
var originalColor = ''; // original color before scroll down
window.addEventListener('scroll', function(){
  currentPosition = (document.body.getBoundingClientRect()).top;
  if ((document.body.getBoundingClientRect()).top > currentPosition ){
        // user scroll to up direction
   }
    else{
         // user scroll to down direction
     }
});

现在，您可以基于上下滚动位置来实现自定义逻辑。

Answer 2

可以获得滚动顶部，并根据该值更新状态。然后根据状态更改背景色。以下是一些伪代码来说明：

handleScroll = (target) => {
    var a = element.scrollTop;

 //separate this into a different async function/promise and call here
 //consider using Refs instead of DOM method: 
// https://reactjs.org/docs/refs-and-the-dom.html

const elRef = document.getElementById(target);
    window.scrollTo({
        left: 0, 
        top: elRef.offsetTop -80,
        behavior: "smooth"
    })
  }

    if(a <= 200){
        this.setState({ posForBG: top })
    } else {
        this.setState({ posForBG: middle })
    }
}

然后体内根据状态设置类

<body class={this.state.posForBG}>
    ...

最后，在CSS中设置背景颜色，例如：

body{
    transition: background-color .5s ease-in-out;
    .top{
        background-color: blue
    }
    .middle{
        background-color: green;
    }
}

如果更简单，也可以使用react-fns。您想做的很多事情已经在这里解决：https://github.com/jaredpalmer/react-fns

如何为特定位置创建滚动事件

2 个答案: