版权声明：本文为博主原创文章，希望能与大家共享。 https://blog.csdn.net/dunegao/article/details/88870373
CSS实现嵌套滚动条（父元素横向滚动，子元素纵向滚动）
关键属性：overflow-x和position
注意点：子元素设置overflow时会自动继承父元素的overflow属性，造成子元素显示的大小没有撑满
解决方法：子元素增加绝对定位，父元素增加相对定位，使子元素脱离文档流不再继承父元素的overflow属性
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.father_scroll{
width:600px;
overflow-x: scroll; /*横向滚动*/
overflow-y: hidden;
text-align:center;
position:relative; /*关键点使子元素脱离文件流不在继承父元素的scroll属性*/
height: 433px;
}
.title{
height: 33px;
width: 800px;
background: orchid;
}
.child_scroll {
height: 400px;
overflow-y: auto; /*垂直滚动*/
position:absolute; /*关键点使子元素脱离文件流不在继承父元素的scroll属性*/
background: olive;
}
.child{
width: 800px;
height: 800px;
background: beige;
}
</style>
</head>
<body>
<div class="father_scroll">
<div class="title">父横向滑动</div>
<div class="child_scroll">
<div class="child">
子垂直滑动
</div>
</div>
</div>
</body>
</html>