將滾動條放置在填充區域外

Question

如何在內容區域始終保持所有方向的填充都爲垂直滾動條？下面的圖片更好地描述了我在找什麼。

I only have the obvious "padding: x" to show for my work :(我試圖嵌套填充，它是熱鬧:)

我想避免的JavaScript，除非真正需要它。把我的頭頂部

Answer 1

這撥弄可能是，你想要什麼：Fiddle

這個例子包含梯度的頂部和底部，但可以是純色當然，如果你想要的話。

您可以使用#content元素的填充區域進行遊戲，但請注意，如果您要創建一個passepartout效果，則需要在右側添加一個附加元素。

#container{ 
 
position:relative; 
 
height:300px; 
 
width:300px; 
 
} 
 
#content{ 
 
height:200px; 
 
width: 200px; 
 
padding: 50px; 
 
overflow-y: auto; 
 
background-color: #cef; 
 
} 
 
.bar { 
 
position:absolute; 
 
width: 280px; 
 
height: 50px; 
 
background-color:#bcd; 
 
} 
 
.vbar { 
 
position:absolute; 
 
width: 50px; 
 
height: 280px; 
 
background-color:#bcd; 
 
} 
 
#topbar{ 
 
top:0;   
 
} 
 
#bottombar{ 
 
bottom:0; 
 
} 
 
#leftbar{ 
 
top:0;   
 
} 
 
#rightbar{ 
 
right:20px;   
 
top:0; 
 
}

<div id="container"> 
 
    <div id="topbar" class="bar"> </div> 
 
    <div id="content" class="pad"> 
 
     1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18<br> 19<br> 20<br> 21<br> 22<br> 23<br> 24<br> 25<br> 26<br> 27<br> 28<br> 29<br> 30<br> 31<br> 32<br> 33<br> 34<br> 35<br> 36<br> 37<br> 38<br> 39<br> 40<br> 41<br> 42<br> 
 
    </div> 
 
    <div id="bottombar" class="bar"></div> 
 
</div>

編輯： 改變了小提琴鏈接，老鏈路與梯度如下：Fiddle

Answer 2

一種方法是使用兩個div滾動區域內類似這樣的

<div> 
    <div class="top"></div> 
    <div class="content">1, 2, 3, 4, 5, 6 ....</div> 
    <div class="bottom"></div> 
</div> 

東西然後用CSS來給「頂「頂部固定位置，底部固定位置」底部「。您還需要爲「內容」div分配頂部和底部填充以說明「頂部」和「底部」div。

Answer 3

如果我沒有理解這個權利，你可以定義一個大小股利或任何包含數字然後使用CSS overflow屬性：

div{ 
    overflow:scroll; 
} 

Answer 4

與DIV的做吧。 CSS：

<style type="text/css"> 
div#top { 
    margin: 0px; 
    padding: 0px; 
    height: 100px; 
    width: 100%; 
    background-color: #97cee0; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: 100; 
} 
div#left { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 100px; 
    background-color: #97cee0; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: 100; 
} 
div#right { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 100px; 
    background-color: #97cee0; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    z-index: 100; 
} 
div#bottom { 
    margin: 0px; 
    padding: 0px; 
    height: 100px; 
    width: 100%; 
    background-color: #97cee0; 
    position: fixed; 
    bottom: 0px; 
    right: 0px; 
    z-index: 100; 
} 
div#content { 
    z-index: 0; 
    padding: 100px; 
} 
div#wrapper { 
overflow: scroll; 
} 
</style> 

HTML：

<div id="wrapper"> 
    <div id="top"></div> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="bottom"></div> 
    <div id="content">Long list of stuff.</div> 
</div> 

Answer 5

瀏覽器負責呈現原生滾動條。我知道的所有瀏覽器都會將垂直滾動直接顯示在框模型的右側。

所以，如果你想有一個不直接附加到你的內容的滾動條，你將不得不使用某種類型的javascript滾動條。看看how to use the Slider control from JQuery UI as a scroll bar。

如何做到這一點的本質是處理某種滾動事件，無論是從滑塊或某個地方的實際滾動條，然後使用它的值來改變內部的div的margin-top css值另一個div與overflow:hidden。