React 滚动条应用实例

1、恢复页面状态

我们知道 React 不提供状态恢复，即返回上一个页面的时候，页面会从0开始，获取数据、渲染，一般为了提升用户体验，我们需要做一下状态恢复，这里面不仅仅包含页面数据，还包含页面滚动的位置，这个时候就需要知道，滚动条距离顶部的距离？
如何获取呢？

//页面即将销毁的时候 合适的位置调用 保存滚动距离
let scrollTop = document.querySelector("#滚动条所在的元素id").scrollTop;

scrollTop 就是滚动的距离。

我们只需要在页面即将销毁的时候调用以上代码，页面重建的时候，调用以下代码

ReactDOM.findDOMNode(document.querySelector("#滚动条所在的元素id")).scrollTo(0, 所记录的滚动距离);

通过以上代码就可以恢复被销毁的页面的用户滑动页面的距离，能够给用户更好的体验。

2、监听滚动条

监听页面滑动距离，最常见的应用：

1、详情页面，滚动一个屏幕长度之后，显示滚动到顶部的按钮。

2、根据滑动距离，动态改变元素样式。

下面给出第二种的实例代码

//添加监听
 componentDidMount() {

   document.querySelector("#监听元素id").addEventListener('scroll', this.listenScroll);

}

//别忘记移除监听
componentWillUnmount() {

   document.querySelector("#监听元素id").removeEventListener('scroll', this.listenScroll.bind(this));

}

// 监听滚动距离 
 listenScroll() {

//这里面可以做一些业务上的处理 例如这里根据滚动距离，来改变元素样式
        const ele=document.querySelector("#改变样式的元素id");

        const width = document.documentElement.clientWidth; 

        const scrollHei = document.querySelector("#监听元素id").scrollTop;

        if(scrollHei>=width-50){

            ele.style.backgroundImage =
                `url(${require("../../assets/images/top_bg.png")})`;

            ele.style.backgroundSize ='100%';


        }else{

            ele.style.backgroundImage ='none';
        }
    }

两种最常见的使用实例。