1.给列表最外层添加一个区分标志,比如classname或者id.这里设置一个className=‘zyl-tBody’
2.给页面增加监听,保证一进来就可以执行这个向上滚动
在生命周期componentDidMount中调用滚动的方法
componentDidMount() {
clearInterval(timer)
//因为后续第6步会使用timer,我们需要定时清理
this.addScroll()
}
3.在addScroll这个方法里:
1.首先是获取到我们需要滚动的列表最外层
let tBody = document.getElementsByClassName('zyl-tBody');
打印一下tBody ,是我们需要设置向上滚动的列表

2.给这个列表添加一个监听事件:
如果这个节点存在,我们就给它绑定监听事件:使用这个
element.addEventListener(event, function,
useCapture(可选布尔值指定事件是否在捕获或冒泡阶段执行))
if (tBody) {
//绑定一个滚动事件,给这个事件指定一个出发时执行的函数
tBody.addEventListener('scroll', this.handleScroll);
}
完整的addScroll:
addScroll() {
let tBody = document.getElementsByClassName('zyl-tBody');
if (tBody) {

本文介绍如何使用React实现列表自动向上滚动的功能,包括给列表添加标识、监听页面加载、监听滚动事件及实现平滑滚动等步骤,并提供了鼠标悬停停止滚动的效果。
最低0.47元/天 解锁文章
1692

被折叠的 条评论
为什么被折叠?



