react的左右联动

效果图

 

 

 

 

 

这是css的代码

body {
    margin: 0;
  }
  .linkage {
    width: 100vw;
    height: 100vh;
    display: flex;
    .linkage-button {
      width: 20vw;
      height: 100vh;
      background: rgb(10, 253, 233);
      text-align: center;
      font-size: 40px;
      color: #fff;
      overflow: scroll;
      scroll-behavior: smooth;
      .linkage-button-list {
        width: 20vw;
        // scroll-behavior:smooth
        .linkage-button-item.ac {
          background: lightblue;
        }
        .linkage-button-item {
            scroll-behavior: smooth;
          width: 20vw;
          height: 10vh;
          line-height: 10vh;
        }
      }
    }
    .linkage-content {
      width: 80vw;
      height: 100vh;
      scroll-behavior: smooth;
      overflow: scroll;
      .linkage-content-list {
        .linkage-content-item {
            position: sticky;
            top: 0;
          width: 80vw;
          height: 100vh;
          .linkage-content-title {
            height: 6vh;
            line-height: 6vh;
            width: 80vw;
            text-align: center;
            background: rgb(68, 0, 255);
            color: #fff;
            font-size: 30px;
          }
        }
      }
    }
  }
  .linkage-button::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .linkage-content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

这是js的代码

import { Component } from 'react'

import './linkage.less'


class LinkAge extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      LeftButton: [],
      RightList:[],
      Active:0
    }
    this.ButtonList=[]
    this.ContentList=[]
    this.ScrollBys= true
    this.ContTop=[0]

  }

  FnSetButton(n) {
    for (var i = 0; i < n; i++) {
      this.ButtonList.push({
        id: `按钮${i}`,
        text: `按钮${i}`,
      });
    }

    // console.log(this.state.LeftButton)
  }
  componentDidMount() {
    this.FnSetButton(19)
    this.FnSetContent(19)
    this.setState({
      LeftButton: this.ButtonList,
      RightList: this.ContentList
    });




  }
  FnSetContent(n) {
    let ContTop = 0; //第一个元素距离页面顶部的距离
    let Random = this.FnSetRandom(1400, 750);
    for (let i = 0; i < n; i++) {
      this.ContentList.push({
        height: Random,
        id: `内容${i}`,
        text: `内容${i}`,
        top: ContTop,
      });
      ContTop += Random;
    }
  }
  FnSetRandom(m, n) {
    return parseInt(Math.random() * (m - n) + n);
  }
  FnClick(index,ev){
    this.ScrollBys = false;
    this.setState({
      Active:index

    })
    this.refs["linkage-content"].scrollTop = this.ContentList[index].top;
    

    this.ow = ev.target.parentNode.parentNode.offsetHeight / 2
    console.log( ev.target )
    this.top = ev.target.offsetTop - this.ow + ev.target.offsetHeight / 2;
    ev.target.parentNode.parentNode.scrollTo({
        top: this.top,
    });
    
   
  }
  FnScroll() {
    this.leftHeight =this.refs["linkage-button-list"].querySelector(".linkage-button-item").offsetHeight;

    // var scrollTop = this.$refs[""].scrollTop;
    this.ContTop = this.refs["linkage-content"].scrollTop;
    if (this.ScrollBys) {
      let n = 0;
      for (let i = 0; i < this.ContentList.length; i++) {
        if (
          this.refs["linkage-content"].scrollTop >= this.ContentList[i].top
        ) {
          //盒子滚动的距离如果大于右边盒子里的元素距离页面顶部的距离
           // 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
          // if (
          //   scrollTop >= offsetTop - headerHeight &&
          //   scrollTop <= offsetTop - headerHeight + scrollHeight
          // ) 
          // if (i > 4) {
          //   this.refs["linkage-button"].scrollTop = (i - 4) * this.leftHeight;
            
          // }
          // if (i <= 1) {
          //   this.refs["linkage-button"].scrollTop = 0;
          // }
          n = i;
          console.log(this.leftHeight)
        }

      }
      this.setState({
        Active : n
      })
     
    }
    if (this.ContTop == this.ContentList[this.state.Active].top) {
      this.ScrollBys = true;
    }

    this.current = Math.ceil((this.refs['linkage-button'].clientHeight) / this.refs['linkage-button-list'].querySelector('.linkage-button-item').offsetHeight / 2)-0.5
        if (this.state.Active > this.current) {//center当前变化的值，current,中间的那个值
            this.refs['linkage-button'].scrollTop = this.refs['linkage-button-list'].querySelector('.linkage-button-item').offsetHeight * (this.state.Active - this.current)
        } else {
            this.refs['linkage-button'].scrollTop = 0
        }
  }
  

  render() {
    return (<div>
      <div className="linkage">
        <div className="linkage-button" ref="linkage-button">
          <div className="linkage-button-list" ref="linkage-button-list">
            {this.state.LeftButton.map((item,index) => (
              <div onClick={this.FnClick.bind(this,index)} className={this.state.Active ===index?"linkage-button-item ac":"linkage-button-item"} key={item.id}>
                {item.text}
              </div>))

            }

          </div>
        </div>
        <div className="linkage-content" ref="linkage-content" onScroll={this.FnScroll.bind(this)} >
          <div className="linkage-content-list" >
            {this.state.RightList.map((item) => (
              <div key={item.id} style={{height:item.height}} className="linkage-content-item">
                <div className="linkage-content-title">{ item.text }</div>
              </div>
            ))

            }

          </div>
        </div>
      </div>
    </div>)
  }

}
export default LinkAge

复制就可以用了