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

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

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

//在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理


    componentDidMount() {


        window.addEventListener('scroll', this.bindHandleScroll)


    }


    //在componentWillUnmount，进行scroll事件的注销


    componentWillUnmount() {


        window.removeEventListener('scroll', this.bindHandleScroll);


    }


    bindHandleScroll = (event) => {


    }

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

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

bindHandleScroll = (event) => {


        // 滚动的高度


        const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)


            || window.pageYOffset


            || (event.srcElement ? event.srcElement.body.scrollTop : 0);


        this.setState({


            hasVerticalScrolled: scrollTop > 10


        })


    }


    render() {


        return (


<div className="header-container" #ffffff':'transparent'}}>


<div className="headerTitle-container">


<img className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>


</div>


</div>


        );


    }

vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

完整Code:

import react, { Component } from 'react';


import './style.less';


interface PropsData {


}


interface StateData {


hasVerticalScrolled: boolean;


}


class Index extends Component<PropsData, StateData> {


constructor(props) {


super(props);


this.state = {


hasVerticalScrolled: false


        };


    }


//在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理


    componentDidMount() {


        window.addEventListener('scroll', this.bindHandleScroll)


    }


    //在componentWillUnmount，进行scroll事件的注销


    componentWillUnmount() {


        window.removeEventListener('scroll', this.bindHandleScroll);


    }


    bindHandleScroll = (event) => {


        // 滚动的高度


        const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)


            || window.pageYOffset


            || (event.srcElement ? event.srcElement.body.scrollTop : 0);


        this.setState({


            hasVerticalScrolled: scrollTop > 10


        })


    }


    render() {


        return (


            <div className="header-container" #ffffff':'transparent'}}>


                <div className="headerTitle-container">


                    <img  className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>


                </div>


            </div>


        );


    }


}


export default Index;