在向下滚动时显示组件中的某个元素并在向上滚动时隐藏 Reactjs

Question

我正在创建一个按钮，该按钮在用户向下滚动时可见，而在用户到达顶部时将不可见。 我正在使用 React 挂钩来跟踪滚动，但无法访问用户滚动到哪一部分。我正在使用每个高度为 100vh 的 Html 部分（3 个部分），顶部有一个固定标题，有一个 login/register 按钮，当用户向下滚动时，即一旦用户到达第二个，就会显示该按钮部分并将一直可见，直到用户到达第一个部分，即根部分。我用 scroll-snap-type: y mandatory;是主容器的CSS

React 代码放在这里：

    import React, { useRef, useEffect, useState } from 'react'
    import { useHistory } from "react-router-dom";

    import Header from './Header'
    import Sec1 from './Sec1'
    import Sec2 from './Sec2'
    import Sec3 from './Sec3'

    import './Home.css'
    function Home() {

        
        let history = useHistory();
        const loginregister = () => {
            //on click login move to login register page      
        }

        var mainConatiner = useRef(null)


        useEffect(() => {
            mainConatiner.current.addEventListener('scroll', () => {
              console.log("srolling");
            })
        })



        return (

            <div className="main-container" ref={mainConatiner}>
                <Header loginregister={loginregister} />
                <div className="middle">
                    {/* Root */}
                    <Sec1 loginregister={loginregister} />

                    {/* Bank */}
                    <Sec2 />

                    {/* Section 3*/}
                    <Sec3 />
                </div>
            </div>
        )
    }

    export default Home

CSS 代码放在这里

    .main-container {
    background: #FFFCF5;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 0fr 1fr;
    overflow-y: scroll;
    scroll-padding-top: 10vh;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 0px;
}
.header {
    display: grid;
    grid-template-columns: 1fr 2fr 0.4fr;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
section {
    height: 100vh;
    scroll-snap-align: center;
    padding-top: 15vh;
    display: grid;
    justify-content: center;
}

我想在单次滚动时获取用户正在查看的部分，该部分会发生变化。 useEffect() 钩子被多次调用

Answer 1

我在我的项目中做过类似的事情，我将向你展示如何做。

我的想法是我有一个聊天窗口，当用户向上滚动阅读以前的消息时，他可以看到一个返回底部的按钮。

我的 ReactJS 文件中有这样的东西，用于呈现我的 div。

import React, { Component } from 'react';
import $ from 'jquery';

class Chat extends Component{

  

  constructor(props){

    super(props);
    this.state = {
      scroll : true,
      chatMessages : []
    }

  }


  componentDidMount(){
    if(this.state.scroll){
          this.scrollToBottom();
    }
    this.scrollToBottom(); //Initially scroll to the bottom of page.
  }
  scrollToBottom(){ //Scroll to the bottom of a div
    $('#chat_messages_container').scrollTop($('#chat_messages_container')[0].scrollHeight);
  }
  handleScroll(){ //Handle every scroll event
    let elem = $('#chat_messages_container');
    if(elem!=undefined){
      if((elem[0].scrollHeight - elem.scrollTop()) > 1300){
        this.setState({
          scroll : false
        });
      }
      else{
        this.setState({
          scroll : true
        })
      }
    }
  }
 
  render(){
    let chatPoruke = [];
    for (var i = 0; i < this.state.chatMessages.length; i++) { //Getting messages
      var poruka_obj = this.state.chatMessages[i];
      chatPoruke.push(
        <ChatMessage props={poruka_obj} key={i}/>
      );
    }
    let scrollBackToBottom = "";
    if(!this.state.scroll){ //If false -> it renders the button for scroll to bottom
      scrollBackToBottom = <div id="scrollToBottom" onClick={()=>{this.scrollToBottom()}}><i className="fas fa-arrow-down"></i> Scroll Down <i className="fas fa-arrow-down"></i></div>
    }

    return(
      <div id="chatdiv">

        <div id="chat_messages_container" onScroll={()=>{this.handleScroll()}}>
          {chatPoruke}

        </div>
        <div id="chat_bottom">
        {scrollBackToBottom}
        </div>
      </div>
    )
  }

}

export default Chat;

这一切是如何运作的： 在return里面，可以看到我有一个chat_messages_container div，里面会一一包含所有的消息。我已将 onScroll 事件添加到（每当用户在该 div 内滚动时），它会触发我的 handleScroll() 函数。

handleScroll() 函数决定用户是否滚动到足以让我的组件将其 state.scroll 更新为 false，一旦将其更改为 false，我的按钮就会显示出来。