一、需求描述
有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflow-y:hidden实现，很基本的实现，没什么难度。
但是，如果同时希望垂直滚动的时候，表格头是固定的。此时该如何实现呢？
此时，使用传统的position:fixed定位是不行的，因为此时水平滚动也会纹丝不动。
此时可以试试position:sticky粘性定位试试。
实现的原理其实挺简单的：
使用同一个滚动容器；
导航元素设置如下CSS属性：
.header {
position: sticky;
top: 0;
}
三、表格头同样支持
如果是<table>表格，同样可以实现类似的效果。
需要注意的是，position:sticky粘性定位设置在tr或者thead标签上是没有效果的，所幸设置在th标签上是可以的，因此，如果希望表格头水平滚动，垂直不滚动，可以使用下面的CSS代码：
th {
position: sticky;
top: 0;
}
四、滚动嵌套也是一种选择
就是水平滚动和垂直滚动通过嵌套实现，这个效果的局限比较大，需要对HTML类型和结构有要求，以及比较适合移动端，或者需要隐藏滚动条的场景。
假设HTML如下：
<div class="box-1">
<div class="box-2">
<div class="header">
<nav>导航1</nav>
<nav>导航2</nav>
<nav>导航3</nav>
</div>
<div class="content">
< img src="1.jpg">
< img src="1.jpg">
< img src="1.jpg">
</div>
</div>
</div>
CSS是这样的：
.box-1 {
max-width: 600px;
overflow-y: hidden;
}
.box-2 {
display: inline-table;
}
.header {
display: flex;
}
.header nav {
flex: auto;
background: #333;
color: #fff;
}
.content {
height: 200px;
overflow: auto;
white-space: nowrap;
}
如果宽度已知
如果宽度已知，还可以利用绝对定位元素的包含块规则，实现水平滚动，垂直不滚动的效果。
HTML结构同上，CSS这里发生变化：
.box-1 {
max-width: 600px;
overflow-y: hidden;
position: relative;
}
.box-2 {
width: 800px; height: 200px;
overflow: auto;
}
.header {
display: flex;
position: absolute;
width: inherit;
}
.header nav {
flex: auto;
background: #333;
color: #fff;
border: 1px solid;
}
