Как получить события прокрутки, когда экран проходит определенную точку или тег jsx?

Question

Это кажется простым вопросом, но я понятия не имею, где его найти. Если вы прокручиваете мимо определенной точки, как вы получаете событие прокрутки.

Обратите внимание, я знаю, как делать события прокрутки; Я просто хочу знать события прокрутки мимо определенных «точек прокрутки».

По сути, моя главная цель - исчезать словами при прокрутке мимо определенных точек.

Вот код, показывающий мое понимание:

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);

Answer 1

На мой взгляд, с помощью модуля лучше сделать понятный код.

Когда я создаю Интернет или приложение, я использую this

Я уверен, что тебе это понравится ~!

Answer 2

Используйте 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);