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;
容器内滚动
监听元素触发滚动
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 };
分类:
Web前端 / HTML/CSS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)