css，js 实现上滑覆盖页面

最新推荐文章于 2024-07-11 17:28:05 发布

桥豆麻袋9393

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量452

点赞数 7

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_46361785/article/details/135696895

版权

文章描述了如何使用CSS和JavaScript实现一个屏幕上滑时内容自动覆盖全屏的效果，关键在于`scroll`事件触发的`height`CSS过渡效果。

摘要由CSDN通过智能技术生成

屏幕录制

实现用户上滑，内容覆盖全屏，核心是css过渡效果。

<div className={styles.home}>
          <div className={`${styles.top}`}>Top Info</div>
          <div ref={this.rankRef} onScroll={this.handleScroll} className={`${styles.rank}  `}>
            <div ref={this.rankChildRef1} className={styles.rank1}>rank1</div>
            <div ref={this.rankChildRef2} className={styles.rank2}>rank2</div>
            <div ref={this.rankChildRef3} className={styles.rank3}>rank3</div>
          </div>
        </div>


.home {
  width: 100vw;
  min-height: 100vh;
  background: #f5f6f8;
}

.top {
  width: 100%;
  height: 50vh;
  background: #f4eee7;
}

.rank {
  position: fixed;
  width: 100vw;
  height: 60vh;
  bottom: 0;
  left: 0;
  background: #eed8cc;
  border-radius: 20px 20px 0 0;
  text-align: center;
  overflow-y: auto;
  transition: height 0.3s ease;
}

.rank1,
.rank2,
.rank3 {
  width: 100%;
  height: 50vh;
}

.rank1 {
  background: #d8e6c8;
}

.rank2 {
  background: #c4d7b3;
}

.rank3 {
  background: #a0bb8a;
}

handleScroll = () => {
    // 处理滚动事件
    // console.log('f', this.rankRef.current.getBoundingClientRect());
    // console.log('c1', this.rankChildRef1.current.getBoundingClientRect());
    // console.log('c2', this.rankChildRef2.current.getBoundingClientRect());
    // console.log('c3', this.rankChildRef3.current.getBoundingClientRect());

    const rankRef = this.rankRef.current;
    const ft = this.rankRef.current.scrollTop
    const c1t = this.rankChildRef1.current.scrollTop
    const c2t = this.rankChildRef2.current.scrollTop

    console.log(ft, c1t, c2t);

    if (ft > 0) { rankRef.style.height = '100vh'; }
    else { rankRef.style.height = '70vh'; }
  };