我有一个侧边栏，里面有一些列表。每个列表前面都有一个标题栏div。侧边栏具有固定的宽度和overflow-x: auto。列表内容可能会溢出，使父侧边栏显示滚动条。
问题是标题栏div在滚动条出现时不会展开。我想要要么，滚动时不要移动它，要么扩展"div"以适应滚动条生成的额外空间：JS Bin
是否可以使用 CSS 解决此问题？
使用 CSS 可能是可能的，但在我看来，您需要使用一些 JavaScript 来解决此问题：
这是诀窍：
var sidebar = $('.sidebar');
sidebar.scroll(function(e) {
sidebar.find('.title').css({
marginLeft: sidebar.scrollLeft()
});
});
我们将在.title元素上添加一些margin-left，等于水平滚动的像素数。这将始终在可滚动元素的右侧显示标题栏棒。
$(function() {
var sidebar = $('.sidebar');
sidebar.scroll(function(e) {
sidebar.find('.title').css({
marginLeft: sidebar.scrollLeft()
});
});
});.sidebar {
overflow-x: auto;
width: 160px;
height: 195px;
background-color: lightgrey;
padding-top: 20px;
}
.title {
width: 100%;
text-align: right;
background-color: grey;
}
.list {
margin-top: 20px;
white-space: nowrap;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<div class="title">
Title
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="title">
Title2
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
</div>请仅使用 CSS 在下面找到解决方案。
.sidebar {
overflow-x: auto;
width: 160px;
height: 200px;
background-color: lightgrey;
padding-top: 20px;
overflow-x: scroll;
}
.title {
width: 160px;
text-align: right;
position: fixed;
background-color: grey;
}
.list {
margin-top: 30px;
white-space: nowrap;
float: left;
}
.clear {
clear: both;
}<title>
JS Bin
</title>
<body>
<div class="sidebar">
<div class="title">
Title
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="clear">
<div class="title">
Title2
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="clear">
</div>
</body>