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';
}
}
两种最常见的使用实例。
下一篇: vue监听滚动事件滚动加载