react监听页面的滚动

最新推荐文章于 2024-07-29 11:42:21 发布

续得木槿

最新推荐文章于 2024-07-29 11:42:21 发布

阅读量3.2k

点赞数 2

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_46161012/article/details/106146775

版权

componentDidMount = () => {
    document
        .getElementsByClassName('leftPanel')[0]
        .addEventListener('scroll', this.bindHandleScroll);
};

bindHandleScroll = (event: any) => {
    console.log(document.getElementsByClassName('leftPanel')[0].scrollTop, '00000');
};

componentWillUnmount() {
    window.removeEventListener('scroll', this.bindHandleScroll);
}
render() {
    return (
        <div className="leftPanel"> //设置高度让它出现滚动条
           好多内容
        </div>
    );
  }
}

这样能获取到数据

2 "00000"
15 "00000"
39 "00000"
53 "00000"
67 "00000"
89 "00000"
95 "00000"
99 "00000"
100 "00000"
101 "00000"
104 "00000"
107 "00000"
108 "00000"
109 "00000"
110 "00000"
111 "00000"

client：元素可视宽高

元素.clientWidth ： width+padding

元素.clientHeight : height+padding

屏幕的可视宽高：

document.documentElement.clientWidth/Height

offset：元素的占位宽高

元素.offsetWidth : width+padding+border

元素.offsetHeight : height+padding+border

到其他元素的位置：

元素.offsetTop : 当前元素的顶部，到定位父元素的位置，没有定位父元素，到body的位置

元素.offsetLeft : 当前元素的左边，到定位父元素的位置，没有定位父元素，到body的位置

scroll：屏幕的滚动距离：