react移动端页面滚动到固定位置显示对应DOM

最新推荐文章于 2026-07-23 10:37:27 发布

原创最新推荐文章于 2026-07-23 10:37:27 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

react

这篇博客探讨了在React移动端页面中，如何实现当滚动到特定位置时显示对应的DOM元素，例如列表标题。文章详细介绍了样式效果，并提供了事件处理和jsx代码片段来说明实现这一功能的方法。

react移动端页面滚动到固定位置显示对应DOM

前言：需求如果进入页面列表标题可见则显示购物车图标，否则监听页面滚动到列表标题显示再显示购物车图标；；

1 . 样式效果如下：在这里插入图片描述

在这里插入图片描述

2 . 事件代码片段

    constructor(props) {
        super(props)
        this.state = {
            cartNum:0,//购物车数量
            cartBarShow:{display:'none'},//购物车icon，默认隐藏
        }
    }
    componentDidMount(){
       this.handleScroll();//页面加载完成调用，判断标题是否可视展示
       window.addEventListener('scroll',this.handleScroll)//监听滚动事件
    }
    componentWillUnmount () {
        window.removeEventListener("scroll", this.handleScroll)
    }
    handleScroll = (e) =>{
        let recommendTitleTop = document.getElementById('recommendTitle').offsetTop;
        let visiableHeight = document.documentElement.clientHeight, // 可视区域高度
            currentOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动的距离
        // 可视区域加滚动区域大于列表标题距离页面顶部距离，则显示
        if ((currentOffset + visiableHeight) > recommendTitleTop) {
            this.setState({cartBarShow:{display:'block'}})
        }//如果需求是标题看不到则隐藏，可以写else判断
    }

3 . jsx部分代码片段

render(){
   const {cartNum,cartBarShow} = this.state
   return (
   		//.....其他页面元素
	     <p id="recommendTitle">列表标题</p>
	     {/* 购物车（绝对定位） */}
	      <div className="cart-bar" style={cartBarShow}>
	          {
	              cartNum !=0 && 
	              <i className="cart-bar-num">{cartNum}</i>
	          }
	      </div>                
   )
}

标签

#react #reactjs