滚动列表头水平

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; 
} 

这应该确保该标题行不重叠的数据容器，并且数据的高度占据了整个容器的剩余空间。