在位置頂部顯示滾動條：絕對標題

我有一個內容比兩個方向都大的包裝。嘗試在桌面上的任意一個方向滾動：https://we-flow.github.io/react-sticky-table/在位置頂部顯示滾動條：絕對標題

垂直滾動條是可見的，因爲我希望它可以隱藏在表頭後面，除非您向下滾動一點。

的水平滾動，一旦你滾動一路底部是唯一可見的，然後它的行爲與垂直滾動條（隱藏粘列後面）。

很明顯，爲什麼會發生這種情況：粘滯標題和列都是position: absolute，並且比主內容div溢出其父項的z-index更高。

我想是兩個滾動條在任何時候，上面粘頭是可見的。我的猜測是，這是不可能的CSS，但也許有與JS一個神奇的解決方案，這樣的庫：https://github.com/malte-wessel/react-custom-scrollbars

表的基本結構是這樣的：

<div style="position: relative; overflow: hidden;"> 
    <div style="position: absolute; z-index: 2;">Header</div> 

    <div style="position: relative; overflow-y: auto; width: 100%;"> 
    <div style="position:absolute; z-index: 1;">Column</div> 

    <div style="overflow-x: auto; height: 100%;"> 
     <div>Content that overflows in both directions</div> 
    </div> 
    </div> 
</div>

哪有我完成了這個？

來源

2016-12-11 maxhud

我想也許這樣的結構會更簡單，並得到你想要的東西。刪除幾層嵌套並使用邊距。

<div style="position: relative; overflow: hidden;"> 

    <div style="position: relative; overflow: auto; width: 100%;"> 
    <div style="position: absolute; z-index: 2;">Header</div> 
    <div style="position:absolute; z-index: 1;">Column</div> 

    <div style="margin: header-size 0px 0px cell-size;" height: 100%;"> 
     <div>Content that overflows in both directions</div> 
    </div> 
    </div> 
</div>

如果你絕對有堅持你的話，是的，你可以使用JavaScript來改變頭部的寬度，當內容是滾動修正垂直滾動條被遮擋的結構，但沒有什麼可以做在當前的格式水平滾動條的，因爲這是滾動的方向y容器是不一樣做爲所滾動的x方向之一。

來源

2016-12-11 02:41:07

嗯感謝您的答案，但我沒有任何運氣得到這個工作在jsfiddle：https://jsfiddle.net/z2dd26zq/ – maxhud

哦，是的，我現在看到。是的，如果沒有覆蓋滾動條的粘滯列/標題，可能無法用CSS做你想做的事情。 –

您最好的選擇是在該容器的滾動事件上使用JavaScript偵聽器，並繼續更新粘性元素的位置，使其等於滾動頂部或向左滾動。而且，就性能問題而言，我會確保您將滾動偵聽器至少消除100ms，並使用變換而不是絕對位置來移動粘性元素。小提琴：https：//jsfiddle.net/z2dd26zq/ –

在位置頂部顯示滾動條：絕對標題

回答

相關問題