滾動列表頭水平

Question

的jsfiddle：https://jsfiddle.net/jefftg/1chmyppm/

橙色標題列和所述白名單的行一起水平滾動，這是期望的。但是，我希望白名單行垂直滾動，橙色標題固定在頂部。他們目前沒有。我正在尋找這個在HTML5/CSS3的現代瀏覽器中工作。

CSS

.container { 
    width: 800px; 
    height: 600px; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

.header-container { 
    display: flex; 
} 

.header-cell { 
    height: 40px; 
    min-width: 500px; 
    background-color: orange; 
    border: 1px solid red; 
} 

.data-container { 
    overflow-y: auto; 
    overflow-x: hidden; 
    display: inline-block; 
} 

.data-row { 
    overflow-x: hidden; 
    display: flex; 
} 

.data-row-cell { 
    height: 30px; 
    min-width: 500px; 
    background-color: white; 
    border: 1px solid black; 
} 

HTML

<div class="header-container"> 
    <div class="header-cell">A</div> 
    <div class="header-cell">B</div> 
    <div class="header-cell">C</div> 
    <div class="header-cell">D</div> 
</div> 

<div class="data-container"> 
    <div class="data-row"> 
    <div class="data-row-cell"> 
     A1 
    </div> 
    <div class="data-row-cell"> 
     B1 
    </div> 
    <div class="data-row-cell"> 
     C1 
    </div> 
    <div class="data-row-cell"> 
     D1 
    </div> 
    </div> 

    ...... 

</div> 

Answer 1

我能夠通過簡單地增加高度，以得到期望的結果：558px到。數據容器：jsfiddle.net/jefftg/1chmyppm/2

Answer 2

你不需要溢出添加到每一個元素，只是元素需要滾動，

我所做的只是給你的.data-container一個display:block和一定的高度，以便overflow-y:auto可以工作，你可以改變你看到適合你的頁面的高度。

這裏顯示我的解決方案，我希望它有幫助。

$(".header-container").scroll(function() { 
 
    var scrollPercentage = 100 * this.scrollLeft/(this.scrollWidth - this.clientWidth); 
 
    $(".data-container").scrollTop(scrollPercentage); 
 
});

.container { 
 
    width: 800px; 
 
    height: 600px; 
 
} 
 
.header-container { 
 
    display: flex; 
 
    overflow-x: auto; 
 
} 
 
.header-cell { 
 
    height: 40px; 
 
    min-width: 500px; 
 
    background-color: orange; 
 
    border: 1px solid red; 
 
} 
 
.data-container { 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    display: block; 
 
    height: 100px; 
 
} 
 
.data-row { 
 
    display: block; 
 
} 
 
.data-row-cell { 
 
    height: 50px; 
 
    min-width: 500px; 
 
    background-color: white; 
 
    display: block; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header-container"> 
 
    <div class="header-cell">A</div> 
 
    <div class="header-cell">B</div> 
 
    <div class="header-cell">C</div> 
 
    <div class="header-cell">D</div> 
 
</div> 
 

 
<div class="data-container"> 
 
    <div class="data-row"> 
 
    <div class="data-row-cell"> 
 
     A1 
 
    </div> 
 
    <div class="data-row-cell"> 
 
     B1 
 
    </div> 
 
    <div class="data-row-cell"> 
 
     C1 
 
    </div> 
 
    <div class="data-row-cell"> 
 
     D1 
 
    </div> 
 
    </div> 
 

 
    ...... 
 

 
</div>

Answer 3

這可以通過使用純CSS做，你並不需要的JavaScript。

我修改你的jsfiddle工作，你所請求的方式：

.container { 
    width: 800px; 
    height: 600px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    /* added this: */ 
    position: relative; 
} 

.header-container { 
    display: flex; 
    /* added these: */ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

上述CSS會：https://jsfiddle.net/48386nvn/3/

從本質上講，.header-container需求相對.container元素絕對被定位將橙色標題粘貼在你想要的地方，並保持你需要的寬度。

接下來，你需要使數據滾動，這是通過執行以下計算完成：

height: heightOfParentContainer - heightOfHeaderRow; 

標題單元格高度爲40像素（42PX尊重邊界時），它還需要一個margin-top等於標題行的高度：

.data-container { 
    overflow-y: auto; 
    overflow-x: hidden; 
    display: inline-block; 
    /* added these: */ 
    margin-top: 40px; 
    height: 560px; 
} 

這應該確保該標題行不重疊的數據容器，並且數據的高度佔據了整個容器的剩餘空間。