[前端][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