Place the scrollbar at the bottom of viewport

Question

I'm working on a rather complex layout. There are two regions, red and blue, that must scroll vertically simultaneously but the right region (blue) must be able to scroll horizontally independently of the other region.

I managed to do that, but the scrollbar is always at the bottom of the div and I need the scrollbar always visible at the bottom of the viewport.

Is it possible to achieve this with HTML/CSS? What plain JS or jQuery plugins could help with this?

JSFiddle Demo

Answer 1

You can not implement it using CSS only. But you can separate panels and syncronize 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> 

Answer 2

I finally found a solution that helps with my layout. It's a mix of Taras Romaniv's answer and Christoph's comment, together with this technique to hide the scrollbar .

A working fiddle can be found here

To hide the scrollbar dynamically, 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)

Blockset is within Panel and after this code it's wider than its container by the width of a scrollbar so the scrollbar is now out of view.

Next, as the bottom scrollbar of the content region adds length to the vertical scrollbar, we have to compensate for that also.

var content = document.querySelector('.content');
var hScrollHeight = content.offsetHeight - content.clientHeight;

$(blockset).css("padding-bottom", hScrollHeight)

We are adding the height of Content's horizontal scrollbar as padding to Blockset. Now when we scroll vertically, both sides will have the same height.

Finally, we synchronize the bars so scrolling vertically on one section will scroll vertically the other.

$(content).scroll(function () {
    $(blockset).scrollTop($(content).scrollTop())
});

$(blockset).scroll(function () {
    $(content).scrollTop($(blockset).scrollTop())
});

And it's done. Having two sections scroll vertically simultaneously but with independent horizontal scrolling is now possible.

A word of warning : I'm using border-box as my box-sizing. To use another box-sizing you will have to change many things.