<iframe id="ByzwM7fW-1705645628914" frameborder="0" src="//i2.wp.com/live.csdn.net/v/embed/360569" allowfullscreen="true" data-mediaembed="csdn"></iframe>

屏幕录制

实现用户上滑，内容覆盖全屏，核心是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'; }
  };