一旦屏幕通过特定点或 jsx 标签，如何获取滚动事件？答案

【问题标题】：How to get scroll events once screen passes a specific point or jsx tag?一旦屏幕通过特定点或 jsx 标签，如何获取滚动事件？
【发布时间】：2018-11-09 07:24:50
【问题描述】：

这似乎是一个简单的问题，但我不知道在哪里可以找到它。如果您滚动超过某个点，您将如何获得滚动事件。

注意，我知道如何进行滚动事件；我只想知道经过某些“滚动点”的滚动事件。

基本上，我的主要目标是在滚动超过某些点时淡入文字。

这里有一些代码显示我的理解：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class Nav extends Component {
    state = {
        background: "",
        backgroundImage: "linear-gradient(to bottom right, white, white",
        navSize: "83px"
    }
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);    
    } 
    componentWillUnmount() {
         window.removeEventListener('scroll', this.handleScroll);
    }
    handleScroll = () => {
let currentPosition = 0;        
currentPosition = (document.body.getBoundingClientRect()).top;
    console.log(currentPosition);
if(currentPosition === 116) {
            this.setState({navSize: "130px"})
        }else {         
            this.setState({navSize: "100px"})
        };
    }
    render() {
const { backgroundImage, navSize } = this.state;                
        return(
        <div style={{ backgroundImage }} className="nav-root">
                    <div style={{ height: navSize }} className="nav-inner-wrapper">
                        <div className="nav-normal">
                            <h3 className="font-size-increase0" >RandomText + The Triangular = RandomText</h3>                                                      
                        </div>
                    </div>
                </div>
            )
    }
}

Nav.propTypes = {
    user: PropTypes.shape({
        email: PropTypes.string
    }),
    logout: PropTypes.func
};

Nav.contextTypes= {
    router: PropTypes.object.isRequired
}

export default connect(null, {})(Nav);

【问题讨论】：

标签： javascript css node.js reactjs frontend

【解决方案1】：

使用window.pageYOffset 查看用户滚动了多远：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class Nav extends Component {
    state = {
        background: "",
        backgroundImage: "linear-gradient(to bottom right, white, white",
        navSize: "83px"
    }
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);    
    } 
    componentWillUnmount() {
         window.removeEventListener('scroll', this.handleScroll);
    }
    handleScroll = () => {
      const doc = document.documentElement;
      const (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
      if (currentPosition === 116) {
        this.setState({navSize: "130px"})
      } else {         
        this.setState({navSize: "100px"})
      }
    }
    render() {
const { backgroundImage, navSize } = this.state;                
        return(
        <div style={{ backgroundImage }} className="nav-root">
                    <div style={{ height: navSize }} className="nav-inner-wrapper">
                        <div className="nav-normal">
                            <h3 className="font-size-increase0" >RandomText + The Triangular = RandomText</h3>                                                      
                        </div>
                    </div>
                </div>
            )
    }
}

Nav.propTypes = {
    user: PropTypes.shape({
        email: PropTypes.string
    }),
    logout: PropTypes.func
};

Nav.contextTypes= {
    router: PropTypes.object.isRequired
}

export default connect(null, {})(Nav);

【讨论】：

【解决方案2】：

在我看来，使用模块更好地使代码清晰。

当我制作网页或应用程序时，我使用的是this

相信你会喜欢的~！

【讨论】：

我认为这只是滚动到元素。我希望有一个事件一旦滚动到或超过一个元素。