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

这可以使用纯CSS完成，而且您不需要JavaScript。

我已修改您的JSFiddle以按您的要求工作：https://jsfiddle.net/48386nvn/3/

基本上，.header-container需要相对于.container元素进行绝对定位：

.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会将橙色标题粘贴在您想要的位置，并保持您需要的宽度。

接下来，您需要使数据可滚动，这可以通过以下计算来完成：

height: heightOfParentContainer - heightOfHeaderRow;

标题单元格高度为40px（相对于边框时为42px）它还需要margin-top等于标题行的高度：

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

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

Answer 2

我只需将高度：558px添加到.data-container：jsfiddle.net/jefftg/1chmyppm/2

即可获得所需的结果

Answer 3

您不需要将溢出添加到每个元素，只需要滚动的元素，

我所做的就是给你的.data-container display:block和一定的高度，以便overflow-y:auto可以正常工作，你可以根据你在页面中看到的内容来改变身高。< / p>

这里显示了我的解决方案，我希望它有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用固定标题垂直滚动列列表，但水平滚动列表和标题

3 个答案: