Помещение полос прокрутки за пределами мягкой области

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 class="top"></div> 
    <div class="content">1, 2, 3, 4, 5, 6 ....</div> 
    <div class="bottom"></div> 
</div> 

Затем с помощью CSS, чтобы дать «верх «div фиксированное положение сверху,« нижний »div - фиксированное положение внизу. Вам также нужно будет предоставить «content» div верхнее и нижнее дополнение для учета «верхних» и «нижних» div.

Answer 3

Если я понимаю это право, вы можете определить размер для DIV или независимо содержать цифры, то используйте свойство переполнения CSS:

div{ 
    overflow:scroll; 
} 

Answer 4

сделать это с Див-х. 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.

Суть того, как это сделать, состоит в том, чтобы обрабатывать какое-то прокручивающее событие либо с ползунка, либо с фактической полосы прокрутки где-то, а затем использовать значение из него, чтобы изменить значение css margin-top div, находящегося внутри другой div с overflow:hidden.