On my webpage, I have multiple lists with separate headers at the top. The number of lists is dynamic and can overflow horizontally. When scrolling horizontally (X-scrolling), the entire page moves. However, when scrolling vertically within the lists, I want the headers to remain fixed at the top. How can I achieve this without the y-scrollbar moving right along with the width of the lists?
The issue seems to lie in the x-overflow and the alignment required for the lists and headers among other things.
I've considered alternative solutions such as relocating the scrollbar to the left side, but that is not an ideal option. You can view a fiddle here: https://jsfiddle.net/planta/1e6bxc4o/56/
.header-wrapper {
display: flex;
background: whitesmoke;
text-align: center;
}
.lists-wrapper {
display: flex;
background: whitesmoke;
text-align: center;
overflow-y: scroll;
overflow-x: hidden;
height: 80%;
width: 100%;
}
.header {
min-width: 200px;
border-bottom: 1px solid grey;
}
.list {
min-width: 200px;
border-right: 1px solid lightgrey;
border-bottom: 3px solid orange;
background: steelblue;
color: white;
height: 1000px;
}
.outer {
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
overflow-x: scroll;
position: absolute;
}
.intermediate {
display: inline-block;
height: 100%;
vertical-align: top;
}<div class="outer">
<div class="intermediate">
<div class="header-wrapper">
<div class="header">
<span>Title 1</span>
</div>
...
</div>
<div class="lists-wrapper">
<div class="list">
content 1
</div>
...
</div>
</div>
</div>