將滾動條放置在視口的底部

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>