[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动

• 2020 年 3 月 16 日
• 筆記

这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动

image.png

最基础的思路就是表头和内容是用两个表格来显示（图来自https://zhuanlan.zhihu.com/p/33280304），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。

image.png

纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置overflow-y:auto就实现纵向滚动了。 但横向滚动呢？ 首先想到的方案是在最外面的div,outer加上overflow-x:auto

<div class="outer">      <div  class="head-container">          <table  class="head">              ……          </table>      </div>     <div  class="content-container">          <table  class="content">              ……          </table>      </div>  <div>

.outer {    overflow-x: auto;  }  .content-container {    overflow-y: auto;  }

虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。

image.png

滚动条被滚走了

然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。

之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。 最后突然想到一个position的新属性，sticky 设置了position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（https://www.cnblogs.com/s1nker/p/4835079.html）。

所以最后设置了表头

<div class="outer">      <table  class="head">              ……     </table>     <div  class="content-container">          <table  class="content">              ……          </table>      </div>  <div>

css:

.head {        position: sticky;        top: 0;   }

就成功实现了想要的效果了。

image.png

不过sticky的兼容性也是要考虑一下的。

image.png