React 监听页面滚动,界面动态显示

以下是常见的监听滚动以及相应的操作

窗口滚动事件

当页面滚动时,如何动态切换布局/样式

1. 添加滚动事件的监听/注销

复制代码
 1     //在componentDidMount,进行scroll事件的注册,绑定一个函数,让这个函数进行监听处理
 2     componentDidMount() {
 3         window.addEventListener('scroll', this.bindHandleScroll)
 4     }
 5     //在componentWillUnmount,进行scroll事件的注销
 6     componentWillUnmount() {
 7         window.removeEventListener('scroll', this.bindHandleScroll);
 8     }
 9     bindHandleScroll = (event) => {
10 
11     }
复制代码

2. 在state中添加参数,滚动页面时更新数据

更新参数后,设置样式。可以直接更新样式,也可以动态修改className然后在css文件中添加动态样式。

复制代码
 1     bindHandleScroll = (event) => {
 2         // 滚动的高度
 3         const scrollTop = event.srcElement.documentElement.scrollTop
 4             || window.pageYOffset
 5             || event.srcElement.body.scrollTop;
 6         this.setState({
 7             hasVerticalScrolled: scrollTop > 10
 8         })
 9     }
10     render() {
11         return (
12             <div className="header-container" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}>
13                 <div className="headerTitle-container">
14                     <img className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>
15                 </div>
16             </div>
17         );
18     }
复制代码

完整Code:

复制代码
 1 import React, { Component } from 'react';
 2 import './style.less';
 3 
 4 interface PropsData {
 5 }
 6 interface StateData {
 7     hasVerticalScrolled: boolean;
 8 }
 9 
10 class Index extends Component<PropsData, StateData> {
11     constructor(props) {
12         super(props);
13         this.state = {
14             hasVerticalScrolled: false
15         };
16     }
17 
18     //在componentDidMount,进行scroll事件的注册,绑定一个函数,让这个函数进行监听处理
19     componentDidMount() {
20         window.addEventListener('scroll', this.bindHandleScroll)
21     }
22     //在componentWillUnmount,进行scroll事件的注销
23     componentWillUnmount() {
24         window.removeEventListener('scroll', this.bindHandleScroll);
25     }
26     bindHandleScroll = (event) => {
27         // 滚动的高度
28         const scrollTop = event.srcElement.documentElement.scrollTop
29             || window.pageYOffset
30             || event.srcElement.body.scrollTop;
31         this.setState({
32             hasVerticalScrolled: scrollTop > 10
33         })
34     }
35     render() {
36         return (
37             <div className="header-container" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}>
38                 <div className="headerTitle-container">
39                     <img  className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>
40                 </div>
41             </div>
42         );
43     }
44 }
45 
46 export default Index;
View Code
复制代码

 容器内滚动

监听元素触发滚动

1 <div onScroll={exerciseContainerScrolled}>
2 </div>
1   const exerciseContainerScrolled = () => {
2     const exerciseContainerRoot = (document.getElementsByClassName('exercise-container') as HTMLCollectionOf<HTMLElement>)[0];
3     onScrollShowed(exerciseContainerRoot.scrollTop >= 200);
4   };
 onscroll 事件
posted @   唐宋元明清2188  阅读(2225)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示
剑桥
16:15发布
剑桥
16:15发布
7°
西南风
3级
空气质量
相对湿度
66%
今天
2°/10°
周三
2°/8°
周四
中雨
2°/7°