Place the scroll bar at the bottom of the viewport
I am working on a rather complex layout. There are two regions, red and blue, which should scroll vertically at the same time, but the correct region (blue) should be able to scroll horizontally independently of the other region.
I succeeded, but the scrollbar is always at the bottom div
and I need a scrollbar that is always visible at the bottom of the viewport.
Is it possible to achieve this with HTML / CSS? What simple JS or jQuery plugins could help with this?
source to share
I finally found a solution that helps with my layout. This is a combination of Taras Romanian and Christoph's answer, and also this technique to hide the scrollbar .
A working script can be found here
To hide the dynamic scrollbar while calculating the width of the scrollbar, I use this
var blockset = document.querySelector('.blockset');
var vScrollWidth = blockset.offsetWidth - blockset.clientWidth
var panelWidth = $(blockset).outerWidth()
$(blockset).css("width", keysWidth + vScrollWidth)
The blockset is inside the Panel, and after this code, it is larger than its container in the width of the scrollbar, so there is no scrollbar now.
Further, since the bottom scrollbar of the content area adds length to the vertical scrollbar, we must compensate for that as well.
var content = document.querySelector('.content');
var hScrollHeight = content.offsetHeight - content.clientHeight;
$(blockset).css("padding-bottom", hScrollHeight)
We add the height of the Content horizontal scrollbar as a complement to the Blockset. Now, when we scroll vertically, both sides will have the same height.
Finally, we will sync the columns, so scrolling vertically in one section will scroll vertically in another.
$(content).scroll(function () {
$(blockset).scrollTop($(content).scrollTop())
});
$(blockset).scroll(function () {
$(content).scrollTop($(blockset).scrollTop())
});
And that's all. With two sections, scroll vertically at the same time, but independent horizontal scrolling is now possible.
A word of warning . I am using border-box as my window size. To use a different box size, you have to change a lot.
source to share
You cannot implement it with CSS alone. But you can detach panels and sync them using JavaScript:
var panel = document.querySelector('.panel');
var content = document.querySelector('.content');
var offset = panel.offsetWidth - panel.clientWidth;
content.style['left'] = -offset + 'px';
content.style['width'] = (content.offsetWidth + offset) + 'px';
content.style['float'] = 'left';
content.style['margin-right'] = -offset + 'px';
content.addEventListener('scroll', function(event) {
panel.scrollTop = event.target.scrollTop;
});
panel.addEventListener('scroll', function(event) {
content.scrollTop = event.target.scrollTop;
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
html {
min-height: 100%;
}
body {
overflow: hidden;
}
.container {
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
}
.panel {
float: left;
background: red;
overflow: scroll;
height: 100%;
}
.content {
position: relative;
background: blue;
overflow: scroll;
height: 100%;
}
.block {
width: 80px;
height: 80px;
margin: 10px;
background: gray;
}
.info {
width: 1500px;
height: 80px;
margin: 10px;
background: white;
}
<div class="container">
<div class="panel">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="content">
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
</div>
</div>
source to share