项目场景-------滚动条横向竖向同步滚动

项目场景之滚动条横向竖向同步滚动

1. 项目场景：

提示：项目上有个自动化数据比对工具需要在视图进行滚动条双向监听滚动：

---

2. 属性描述：

提示：涉及到几个属性值需要了解：

      // 垂直滚动条
      //  scrollHeight;--------->可滚动的高度
      //  clientHeight;--------->滑块的高度
      //  scrollTop;   --------->已纵向滚动的距离
      // 水平滚动条
      // scrollWidth;--------->可滚动的宽度
      // clientWidth;--------->滑块的宽度
      // scrollLeft; --------->已横向滚动的距离

---

3. 思路分析：

提示：
监听一个同方向的滚动条，当滚动条滚动时，获取同方向滚动条的位置，然后改变另一个同方向滚动条的位置；。

---

4. 解决方案：

直接上代码：建议大家自己手敲代码去理解

1. 样式代码：

   <style>
      .box {
        width: 1200px;
        overflow: auto;
        margin: 20px auto;
      }
      .box .box-show {
        display: flex;
      }
      .box .box-title {
        font-size: 30px;
        text-align: center;
        margin: 30px auto;
      }
      .box .box-left,
      .box .box-right {
        width: 50%;
        height: 500px;
        border: 1px solid #ccc;
        overflow: scroll;
      }
      .box ol > li {
        white-space: nowrap;
      }
    </style>

2.html代码

      <div class="box">
      <div class="box-title">滚动条横向竖向同步滚动</div>
      <div class="box-show">
        <div class="box-left">
          <ol>
            <li>
              我们含着泪水哭着来到这个世界，又在别人的泪水和哭声中离开这个世界，中间的过程被叫做人生。人生，就是一边拥有，一边失去;一边选择，一边放弃。
            </li>
            <li>人生，哪有事事如意，生活，哪有样样顺心。</li>
            <li>有的人拿不起，</li>
            <li>也就无所谓放下</li>
            <li>和往事较真，。</li>
            <li>不和现实较真，</li>
            <li>因为还要继续</li>
            <li>人要拿得起，也要放得下。</li>
            <li>拿得起是生存，</li>
            <li>放得下是生活;</li>
            <li>拿得起是能力，</li>
            <li>放得下是智慧</li>
            <li>有的人拿得起，却放不下</li>
            <li>拿不起，就会庸庸碌碌；</li>
            <li>放不下，就会疲惫不堪</li>
            <li>人生有许多东西需要放下。</li>
            <li>只有放下那些无谓的负担，</li>
            <li>我们才能一路潇洒前行。</li>
            <li>曾经的美好留于心底，</li>
            <li>曾经的悲伤置于脑后，</li>
            <li>不恋不恨</li>
            <li>过去终是过去</li>
            <li>那人，那事，那情，任你留恋，都是云烟</li>
            <li>学会放下</li>
            <li>人生总是从告别中走向明天。</li>
            <li>
              知足的人生让我们感到平静、安详、达观、超脱，不为凡尘中的各种牵累所左右
            </li>
            <li>是一种智慧的人生境界</li>
            <li>对生活不挑剔</li>
            <li>不苛求，不怨恨，不贪婪，不误解，不怀疑</li>
          </ol>
        </div>
        <div class="box-right">
          <ol>
            <li>
              我们含着泪水哭着来到这个世界，又在别人的泪水和哭声中离开这个世界，中间的过程被叫做人生。人生，就是一边拥有，一边失去;一边选择，一边放弃。
            </li>
            <li>人生，哪有事事如意，生活，哪有样样顺心。</li>
            <li>有的人拿不起，</li>
            <li>也就无所谓放下</li>
            <li>和往事较真。</li>
            <li>不和现实较真，</li>
            <li>因为还要继续</li>
            <li>人要拿得起，也要放得下。</li>
            <li>拿得起是生存，</li>
            <li>放得下是生活;</li>
            <li>拿得起是能力，</li>
            <li>放得下是智慧</li>
            <li>有的人拿得起，却放不下</li>
            <li>拿不起，就会庸庸碌碌；</li>
            <li>放不下，就会疲惫不堪</li>
            <li>人生有许多东西需要放下。</li>
            <li>只有放下那些无谓的负担，</li>
            <li>我们才能一路潇洒前行。</li>
            <li>曾经的美好留于心底，</li>
            <li>曾经的悲伤置于脑后，</li>
            <li>不恋不恨</li>
            <li>过去终是过去</li>
            <li>那人，那事，那情，任你留恋，都是云烟</li>
            <li>学会放下</li>
            <li>人生总是从告别中走向明天。</li>
            <li>知足的人生让我们感到平静、安详、达观、超脱，不为凡尘中的各种牵累所左右 </li>
            <li>是一种智慧的人生境界</li>
            <li>对生活不挑剔</li>
            <li>不苛求，不怨恨，不贪婪，不误解，不怀疑</li>
          </ol>
        </div>
      </div>
    </div>

3.JS代码：

    <script type="text/javascript">
      var l = document.querySelector(".box-left"); // 获取左侧盒子的元素
      var r = document.querySelector(".box-right"); // 获取右侧盒子的元素
      var scaleY =  (l.scrollHeight - l.clientHeight) / (r.scrollHeight - r.clientHeight); // 竖向滚动比例
      var scaleX =  (l.scrollWidth - l.clientWidth) / (r.scrollWidth - r.clientWidth); // 横向滚动比例
      var isRoll = true; //滚动同步布尔
      l.addEventListener("mouseover", function () {   //监听鼠标所在区域的scroll事件
        isRoll = false;
        l.addEventListener("scroll", function () {    //监听scroll事件
          if (!isRoll) {
            r.scrollTop = l.scrollTop / scaleY;    // 通过比例进行关联
            r.scrollLeft = l.scrollLeft / scaleX;
          }
        });
      });
      r.addEventListener("mouseover", function () {
        isRoll = true;
        r.addEventListener("scroll", function () {
          if (isRoll) {
            l.scrollTop = r.scrollTop / scaleY;
            l.scrollLeft = r.scrollLeft * scaleX;
          }
        });
      });
    </script>