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" style={{backgroundColor:this.state.hasVerticalScrolled?'#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" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}>
                <div className="headerTitle-container">
                    <img  className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>
                </div>
            </div>
        );
    }
}

export default Index;

来源：https://www.cnblogs.com/xiaonian8/p/13705126.html