布局滚动同步方案-CSDN博客

本文链接：https://blog.csdn.net/qq_21397815/article/details/115942273

（ 1 ）请实现上图所示的布局

（ 2 ）有以下已知条件：

center 区域高度必然大于 left 、 right 区域

left 、 right 区域溢出后与 center 区域共用同一滚动条

当 left 、 right 区域内容溢出后，请实现以下功能：

left 、 right 区域跟随滚动条滚动到底部就固定住， center 区域继续滚动

滚动条向上滚动，当 center 区域滚动到和 left 、 right 相同高度时， left 、 right 跟随滚

动，滚动到顶部时， left 、 right 同时到达顶部

实现代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      h3 {
        text-align: center;
      }
      .header {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        background-color: burlywood;
        z-index: 10;
      }
      .main {
        margin: 50px 100px 0;
        clear: both;
        box-sizing: border-box;
        position: relative;
      }
      .left {
        background-color: cornflowerblue;
        border: 1px rgb(24, 51, 102) solid;
        float: left;
      }
      .right {
        background-color: darkseagreen;
        border: 1px rgb(70, 95, 70) solid;
        float: right;
      }
      .left, .right {
        width: 300px;
      }
      .bottom {
        position: fixed;
        bottom: 0;
      }
      .bottom.left {
        left: 100px;
      }
      .bottom.right {
        right: 100px;
      }
      .top {
        position: fixed;
        top: 50;
      }
      .top.left {
        left: 100px;
      }
      .top.right {
        right: 100px;
      }
      .center {
        background-color: cadetblue;
        border: 1px rgb(26, 76, 78) solid;
        margin: 0 310px;
      }
      pre {
        line-height: 20px;
      }
      .clearfix {
        overflow: auto;
      }
      .clearfix::after {
        clear: both;
      }

    </style>
  </head>

  <body>
    <header class="header">
      <h3>header</h3>
    </header>
    <main class="main clearfix">
      <aside id="left" class="left">
        <h3>left</h3>
        <pre>
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          </pre>
      </aside>

      <aside id="right" class="right">
        <h3>right</h3>
        <pre>
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29

          30
          31
          32
          33
          34
          35
          36
          37
          38
          39

          40
          41
          42
          43
          44
          45
          46
          47
          48
          49

          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          </pre>
      </aside>
      <section class="center">
        <h3>center</h3>
        <pre>
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29

          30
          31
          32
          33
          34
          35
          36
          37
          38
          39

          40
          41
          42
          43
          44
          45
          46
          47
          48
          49

          50
          51
          52
          53
          54
          55
          56
          57
          58
          59

          60
          61
          62
          63
          64
          65
          66
          67
          68
          69

          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          0
          1
          2
          3
          4
          5
          6
          7
          8
          9

          10
          11
          12
          13
          14
          15
          16
          17
          18
          19

          20
          21
          22
          23
          24
          25
          26
          27
          28
          29

          30
          31
          32
          33
          34
          35
          36
          37
          38
          39

          40
          41
          42
          43
          44
          45
          46
          47
          48
          49

          50
          51
          52
          53
          54
          55
          56
          57
          58
          59

          60
          61
          62
          63
          64
          65
          66
          67
          68
          69

          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
        </pre>
      </section>
    </main>
    <script>
      window.onload = () => {
        // 左边显示Dom
        const $left = $('left');
        // 右边显示DOM
        const $right = $('right');
        // 可视区域的高度
        const clientHeight = document.documentElement.clientHeight;
        const $leftHeight = $left.offsetHeight - clientHeight;
        const $rightHeight = $right.offsetHeight - clientHeight;
        console.log('clientHeight', clientHeight);
        console.log('$leftHeight', $leftHeight);
        console.log('$rightHeight', $rightHeight);
        if($rightHeight<=0) {
          $right.classList.add('top');
        }
        if($leftHeight<=0) {
          $left.classList.add('top');
        }
        window.addEventListener('scroll', event => {
          const scrollTop = document.documentElement.scrollTop;
          if ($leftHeight > 0) {
            if (scrollTop > $leftHeight) {
              $left.classList.add('bottom');
            } else {
              $left.classList.remove('bottom');
            }
          }
          if ($rightHeight > 0) {
            if (scrollTop > $rightHeight) {
              $right.classList.add('bottom');
            } else {
              $right.classList.remove('bottom');
            }
          }

        })

        function $(id) {
          return document.getElementById(id);
        }
      }

    </script>
  </body>

</html>