[英]Show a certain element in a component on scroll down and hide on scroll Up Reactjs
我正在创建一个按钮,当用户向下滚动时将可见,如果用户到达顶部,它将变得不可见。 我正在使用 React 挂钩来跟踪滚动,但无法访问用户滚动到哪一部分。 我正在使用 Html 部分,每个高度为 100vh(3 个部分),顶部有一个固定的header用户到达第一个部分,即根部分。 我使用了scroll-snap-type: y mandatory;
是主容器的 CSS
反应代码在这里:
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()
钩子被多次调用
我对我的项目做了类似的事情,我将向你展示如何做。
我的想法是我有一个聊天 window,当用户向上滚动阅读以前的消息时,他可以看到 go 的按钮回到底部。
我在呈现我的 div 的 ReactJS 文件中有类似的东西。
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()
function。
handleScroll()
function 决定用户是否滚动到足以让我的组件将其 state.scroll 更新为 false,一旦将其更改为 false,我的按钮就会显示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.