我有一个为该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;
}
发布于 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
https://stackoverflow.com/questions/55268993
复制相似问题