React 監聽頁面滾動，界面動態顯示

本文轉載自查看原文 2020-06-13 10:52 890 HTML/CSS

以下是常見的監聽滾動以及相應的操作

窗口滾動事件

當頁面滾動時，如何動態切換布局/樣式

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 事件

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 頁面滾動條的動態顯示隱藏 jQuery實現頁面滾動時頂部動態顯示隱藏 react 監聽頁面滾動數碼管動態顯示 js動態顯示時間 react 反模式——不使用jsx動態顯示異步組件 React反模式 —— 如何不使用JSX地動態顯示組件微信小程序（七）文章詳情頁面動態顯示 Android中當前時間的動態顯示 mfc動態顯示圖片（bmp以及png）