js实现左右列表对齐（左边点击时，右边滚动和左边对齐。反之右边点击时，左边滚动和右边对齐）

news2025/1/17 9:06:13

需求：

js实现左右列表对其（左边点击时，右边滚动和左边对齐。反之右边点击时，左边滚动和右边对齐）
效果示意图：

点击6666的效果图如下：

实现代码：

思路：

1…需要一个东西把两个列表里的项关联起来，我用的id。左边就是left+id ,右边是 right+id.
2…点击左侧，右边滚动。获取当前点击的元素距离其父元素的顶部距离（offsetTop），右则相同id距离其父元素的顶部距离（offsetTop）。左则距离-右侧距离。当左侧有滚动时，则需要左则距离-右侧距离 + 左侧滚动距离

3…点击右侧，左边滚动。
jsx代码：

const Home1 = () => {
  const listRef = useRef([]);
  const list = [
    {
      text: "555555",
      id: 1
    },
    {
      text: "6666",
      id: 2
    },
    {
      text: "7777",
      id: 3
    },
    {
      text: "8888",
      id: 4
    },
    {
      text: "9999",
      id: 5
    },
    {
      text: "10000",
      id: 6
    }
  ];

  const clickTxt = (id) => { //点击左侧事件
    let domId = "right" + id;
    let dom = document.getElementById(domId);
    let right = document.getElementById("right");
    const offsetTop = dom.offsetTop;

    let domIdL = "left" + id;
    let domL = document.getElementById(domIdL);
    let left = document.getElementById("left");
    const offsetTopL = domL.offsetTop;
    let scrollNum
    if (left.scrollTop > 0) { //左侧 滚动距离 大于0 则 右-左
      scrollNum = offsetTop - offsetTopL + left.scrollTop;
    } else {
      scrollNum = offsetTop - offsetTopL;
    }
    right.scrollTop = scrollNum;
  }


  const clickTxt1 = (id) => { //点右侧事件
    let domId = "left" + id;
    let dom = document.getElementById(domId);
    let left = document.getElementById("left");
    const offsetTop = dom.offsetTop;

    let domIdR = "right" + id;
    let domR = document.getElementById(domIdR);

    const offsetTopR = domR.offsetTop;
    let scrollNum
    if (right.scrollTop > 0) { //右侧 滚动距离 大于0 则 左-右
      scrollNum = offsetTop - offsetTopR + right.scrollTop;
    } else {
      scrollNum = offsetTop - offsetTopR;
    }
    left.scrollTop = scrollNum;
  }
  return (
    <div className={styles.home1} style={{ height: '100vh', padding: 20 }}>
      <div className={styles.left} id='left'>

        {
          list.map((item, index) => {
            return <div onClick={() => clickTxt(item.id)} className={styles.item} key={index} id={"left" + item.id}>
              {
                item.text
              }
            </div>
          })
        }
      </div>

      <div className={styles.right} id='right'>
        {
          list.map((item, index) => {
            return <div onClick={() => clickTxt1(item.id)} className={styles.itemRight} key={index} id={"right" + item.id}>
              {
                item.text
              }
            </div>
          })
        }
      </div>
    </div>
  )
}

export default Home1

less代码：

.home1{
    display: flex;
    
}
.left,.right{
    width: 50%;
    height: 100%;
    height: 900px;
    overflow-y: auto;
}
.item{
    width: 100%;
    height: 200px;
    border: 1px solid red;
    cursor: pointer;
}
.itemRight{
    width: 100%;
    height: 300px;
    border: 1px solid gray;
    cursor: pointer;
}