欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React 滚动条应用实例

程序员文章站 2024-02-02 11:21:40
...

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';
        }
    }

两种最常见的使用实例。

React 滚动条应用实例