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.documentElement.scrollTop
            || window.pageYOffset
            || event.srcElement.body.scrollTop;
        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>
        );
    }

完整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.documentElement.scrollTop
            || window.pageYOffset
            || event.srcElement.body.scrollTop;
        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;