多个div沿x轴滚动

FEdayuer2020

于 2023-08-15 17:44:20 发布

阅读量186

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/FEdayuer2020/article/details/132303213

版权

大致的布局是上下两个盒子，每个盒子分左右两个，左边固定，右边滑动。要实现的效果，上边的盒子中右边盒子滑动，下边盒子的右边盒子也滑动。下边盒子的右边盒子滑动不影响上面盒子。

.big-box{
      display: flex;
      
    }
    .big-box-left{
      width: 200px;
    }
    .special-box {
            width: 100%;
            box-sizing: border-box;
            margin-top: 13px;
            overflow: hidden;
            overflow-x: scroll;
            white-space: nowrap;
            display: flex;
            flex-direction: column;
            margin-bottom: 40px;
        }
 
        .row {
            display: inline-block;
            overflow: hidden;
            height: 40px;
            width: 200%;
        }
 
        span {
            display: inline-block;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: #333333;
            margin-right: 20px;
        }
 
        .spec-name {
            display: inline-block;
            height: 12px;
            width: 180px;
            padding-right: 10px;
        }

<div class="big-box">
    <div class="big-box-left">zhanweii</div>
    <div class="special-box" id="left">
      <div class="row">
          <span class="spec-name">Height</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
      </div>
      <div class="row">
          <span class="spec-name">Height</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
      </div>
  
      <div class="row">
          <span class="spec-name">Net weight</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
      <div class="row">
          <span class="spec-name">weight after packaging</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
      <div class="row">
          <span class="spec-name">weight after packaging</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
      <div class="row">
          <span class="spec-name">weight after packaging</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
    </div>
  </div>
  <div class="big-box">
    <div class="big-box-left">zhanweii</div>
    <div class="special-box" id="right">
      <div class="row">
          <span class="spec-name">Height</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
      </div>
      <div class="row">
          <span class="spec-name">Height</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
          <span>135cm</span>
      </div>
  
      <div class="row">
          <span class="spec-name">Net weight</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
      <div class="row">
          <span class="spec-name">weight after packaging</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
      <div class="row">
          <span class="spec-name">weight after packaging</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
      <div class="row">
          <span class="spec-name">weight after packaging</span>
          <span>33.5kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>29kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
          <span>33.5kg</span>
      </div>
    </div>
  </div>

  let left=document.getElementById('left');
      let right=document.getElementById("right");
      left.onscroll=(e)=>{
          console.log("滚动事件",e.target.scrollLeft);   
          console.log("打印此时右边的滚动高度",right.scrollLeft);
          //同步，把左边的scrollLeft赋值给右边的scrollLeft
          right.scrollLeft=e.target.scrollLeft;
      }```