原生 js、html 滑动窗口

永恒dingle

已于 2023-01-11 10:02:58 修改

阅读量726

点赞数 1

文章标签： javascript html ui

于 2023-01-10 19:20:57 首次发布

原文链接：https://blog.csdn.net/qq_26769677/article/details/119902212

版权

原生 js、html 写一个有固定列滚动的 table
像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的，比如左边固定则滚动的时候左边不会随着滚动而看不见，右边固定则右侧一列是固定住不动的。

接下来直接用 html 和 js 来尝试一下这种 table 的效果。

一：固定列
这里我想使用position: sticky;直接达到相对 table 列的固定效果，不需要改变 dom 的结构。

二：阴影
阴影的效果是，当 table 往右边滚，则左固定列显示阴影效果；当 table 往左边滚，则右固定列显示阴影；如果同时设置左右列都固定，则临界边不显示阴影而滚动到中间两侧固定列都显示阴影。
这里我打算通过监听 table 的滚动来控制阴影的展示。

三：高度
因为直接对 table 进行样式更改，不会改变 table 的 dom 结构，会保留 table 原有的“一列行高变化其它列行高也变化”效果。

四：border 样式
不使用 table 自带样式（太丑了），随便写几句美化一下。

左边列固定滚动的table

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .table {
        width: 700px;
      }
      .table-container {
        position: relative;
        overflow: scroll;
      }
      .table .table-container table {
        width: max-content;
      }
      .table table tr {
        position: relative;
      }

      .table table td {
        border-bottom: 1px solid #ebeef5;
        height: 38px;
        font-size: 14px;
        color: #666;
      }
      .table .table-container .fixed {
        position: sticky;
        left: 0;
        background-color: #fff;
      }

      .table .table-container .fixed::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: -1px;
        width: 30px;
        transform: translateX(100%);
        transition: box-shadow 0.3s;
        content: "";
        pointer-events: none;
      }

      .table .table-container .box-shadow::after {
        box-shadow: rgba(0, 0, 0, 0.12) 10px 0px 8px -8px inset;
      }
    </style>
  </head>
  <body>
    <div class="table">
      <div class="table-container">
        <table border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <td width="150" class="fixed">姓名</td>
              <td width="150">类别</td>
              <td width="150">年龄</td>
              <td width="150">身高</td>
              <td width="150">体重</td>
              <td width="150">肤色</td>
              <td width="150">牙齿</td>
              <td width="150">健康</td>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td class="fixed">张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td>良好</td>
            </tr>
            <tr>
              <td class="fixed">张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td>良好</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
      window.onload = function () {
        let doc = document.getElementsByClassName("table-container")[0];
        let leftFixs = doc.getElementsByClassName("fixed");

        doc.addEventListener(
          "scroll",
          function (e) {
            if (e.target.scrollLeft > 0) {
              [...leftFixs].forEach((item) => {
                item.classList.add("box-shadow");
              });
            } else {
              [...leftFixs].forEach((item) => {
                item.classList.remove("box-shadow");
              });
            }
          },
          true
        );
      };
    </script>
  </body>
</html>

在这里插入图片描述

右边列固定滚动的table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .table {
      width: 700px;      
    }
    .table-container {
      position: relative;
      overflow: scroll;

    }
    .table .table-container table {
      width: max-content;
    }
    .table table tr{
      position: relative;
    }

    .table table td{
      border-bottom: 1px solid #ebeef5;
      height: 38px;
      font-size: 14px;
      color: #666;
      padding: 2px;
    }
    .table .table-container .fixed {
      position: sticky;
      right: 0;
      background-color: #fff;
    }

    .table .table-container .fixed::before {
      position: absolute;
      top: 0;
      bottom: -1px;
      left: 0;
      width: 30px;
      transform: translateX(-100%);
      transition: box-shadow .3s;
      content: '';
      pointer-events: none;
    }

    .table .table-container .box-shadow::before {
      box-shadow: rgba(0,0,0,0.12) -10px 0 8px -8px inset;
    }

  </style>
</head>
<body>
  <div class="table">

    <div class="table-container">

        <table border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <td width="150">姓名</td>
              <td width="150">类别</td>
              <td width="150">年龄</td>
              <td width="150">身高</td>
              <td width="150">体重</td>
              <td width="150">肤色</td>
              <td width="150">牙齿</td>
              <td width="150" class="fixed">健康</td>
            </tr>
          </thead>
    
          <tbody>
            <tr>
              <td>张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td class="fixed">良好</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>人</td>
              <td>12</td>
              <td>136</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td class="fixed">良好</td>
            </tr>
          </tbody>
        </table>

    </div>
   
  </div>
  <script>
    window.onload = function () {
      let doc = document.getElementsByClassName('table-container')[0]

      let rightFixs = doc.getElementsByClassName('fixed')

      let table = doc.getElementsByTagName('table')[0]
	
		{
	        [...rightFixs].forEach(item => {
	          item.classList.add('box-shadow')
	        })
	     }

      doc.addEventListener('scroll', function(e) {

        if (e.target.scrollLeft < table.clientWidth - doc.clientWidth) {
          [...rightFixs].forEach(item => {
            item.classList.add('box-shadow')
          })
        } else {
          [...rightFixs].forEach(item => {
            item.classList.remove('box-shadow')
          })
        }
      }, true)
    }
  </script>
</body>
</html>

在这里插入图片描述

永恒dingle

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生 js、html 滑动窗口

像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的，比如左边固定则滚动的时候左边不会随着滚动而看不见，右边固定则右侧一列是固定住不动的。阴影的效果是，当 table 往右边滚，则左固定列显示阴影效果；如果同时设置左右列都固定，则临界边不显示阴影而滚动到中间两侧固定列都显示阴影。因为直接对 table 进行样式更改，不会改变 table 的 dom 结构，会保留 table 原有的“一列行高变化其它列行高也变化”效果。左边列固定滚动的table。
复制链接

扫一扫