首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Reactjs中隐藏滚动元素?

在Reactjs中隐藏滚动元素?
EN

Stack Overflow用户
提问于 2019-03-21 03:42:02
回答 1查看 8.8K关注 0票数 2

我有一个为该div启用滚动功能的div。我有一些元素,当用户开始滚动时,我希望元素消失,当滚动停止时,我希望它再次显示。

我该怎么做呢?

<div className="container"/> 
    <div>Hide me on scrolling</div>
    <div>Always show </div>
</div>

.container{
    flex: 1 1 80%;
    display: flex;
    flex-wrap: wrap;
    width: calc(100vw - 110px);
    height: calc(100vh - 75px);
    overflow-y: auto;
    min-width: 500px;
    display: flex;
    justify-content: center;
    z-index: 1;
}
EN

回答 1

Stack Overflow用户

发布于 2022-02-21 19:58:44

一种不同的方法:

import React,{ Component } from 'react';
    class ScrollHide extends Component {
    
      constructor(props) {
        super(props);
       this.state = {
        opacity: '1'
      }
    }
    
    
      componentDidMount() {
        if (typeof window !== "undefined") {
          window.onscroll = () => {
            const currentScrollPos = window.pageYOffset;
            const maxScroll = document.body.scrollHeight - window.innerHeight;
            // console.log(maxScroll)
            if (currentScrollPos > 0 && currentScrollPos < maxScroll) {
              this.setState({ opacity: "0" })
              // console.log(currentScrollPos)
            } else {
              this.setState({ opacity: "1" })
            }
          }
        }
      }
    
      render() {
        return (
            <>
            <div  style={{ opacity: `${this.state.opacity}`}} >
             {/* additonal content */}TestView
            </div>
    
    
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec felis eu nisl varius gravida eget nec libero. Nulla tristique varius semper. Pellentesque euismod, justo eu rutrum congue, turpis libero placerat lorem, vel accumsan felis enim et enim. Nunc facilisis lectus ac mi iaculis imperdiet. ....add more content here...
    
    </div>
    </>
        )
      }
    }
    
    export default ScrollHide
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55268993

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档