将滚动条放置在视口的底部

Question

我正在处理相当复杂的布局。有两个区域，红色和蓝色，必须同时垂直滚动，但右侧区域（蓝色）必须能够独立于其他区域水平滚动。

我设法做到了这一点，但滚动条始终位于div的底部，我需要滚动条总是在视口底部可见。

是否可以用HTML/CSS来实现这一点？简单的JS或jQuery插件可以为此提供什么帮助？

JSFiddle Demo

Answer 1

我终于找到了一个解决方案，我的布局有所帮助。这是Taras Romaniv的回答和Christoph的评论以及this technique to hide the scrollbar的组合。

A working fiddle can be found here

要动态隐藏滚动条，计算所述滚动条的宽度，我用这个

var blockset = document.querySelector('.blockset'); 
var vScrollWidth = blockset.offsetWidth - blockset.clientWidth 
var panelWidth = $(blockset).outerWidth() 

$(blockset).css("width", keysWidth + vScrollWidth) 

模块库是面板内并且这个代码后它通过的宽度比它的容器更宽滚动条，所以滚动条现在不在视图中。

接下来，随着内容区域的底部滚动条向垂直滚动条添加长度，我们也必须对其进行补偿。

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

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

我们将Content的水平滚动条的高度作为填充添加到Blockset。现在，当我们垂直滚动时，双方将具有相同的高度。

最后，我们同步这些条，这样一个部分的垂直滚动将垂直滚动另一个部分。

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

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

然后就完成了。现在可以使两个部分同时垂直滚动但具有独立的水平滚动。

一个警告字：我使用边框作为我的箱子大小。要使用另一个盒子大小，你将不得不改变很多东西。

Answer 2

你不仅可以使用CSS实现它。但是你可以单独面板和使用JavaScript syncronize他们：

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>