Вопрос по css, html – Помещение полосы прокрутки вне области дополнения

4

Как разместить вертикальную полосу прокрутки, сохраняя при этом отступ в любом направлении в области содержимого? Картинка ниже лучше описывает то, что я ищу.

У меня есть только очевидные "отступы: x" показать для моей работы :( Я попробовал вложение отступов, и это было весело :)

Я хотел бы избежать JavaScript, если он действительно не нужен.

Current and Desired look of the page

что-то вроде этого:jsfiddle.net/3V2HP/3 ? Christoph
@ ANeves Это просто ощущение фиксированного заполнения. Иногда пригодится. Чтобы стать еще веселее:jsfiddle.net/3V2HP/4 с эффектом затухания Christoph
Why ты хочешь этого? Это ужасно запутанно и непригодно для использования. Как вы оправдываете отделение свитка от прокручиваемого поля? ANeves
Я отвечу вам более сложным решением. Christoph
@Christoph Это близко, просто отсутствует боковое заполнение. ANeves. Я хочу поместить изображения в отступы, например рамку рисования, поэтому я не хочу, чтобы полоса прокрутки мешала заполнению "рамки". и содержание Heitor Chang

Ваш Ответ

5   ответов
0

вы можете определить размер для div или любой другой, содержащий числа, а затем использовать свойство переполнения css:

div{
   overflow:scroll;
}
3

<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>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

стные мне браузеры будут отображать вертикальную прокрутку справа от вашей блочной модели.

Поэтому, если вы хотите иметь полосу прокрутки, которая не связана непосредственно с вашим контентом, вам придется использовать какую-либо полосу прокрутки JavaScript. Посмотри накак использовать элемент управления Slider из JQuery UI в качестве полосы прокрутки.

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

Error: User Rate Limit Exceeded
15

скрипка

В этом примере содержатся градиенты для верхней и нижней частей, но, конечно, при желании они могут быть сплошными.

Вы можете поиграть с дополнением#content Элемент, но обратите внимание, что вам нужен дополнительный элемент справа, если вы хотите создать эффект паспарту.

#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>

редактировать: изменена ссылка на скрипку, старая ссылка с градиентами выглядит следующим образом:скрипка

Error: User Rate Limit Exceededjsfiddle.net/3V2HP/9Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededwidth:20px
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/3V2HP/8Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/3V2HP/9Error: User Rate Limit Exceeded
0

ти прокрутки.

что-то похожее на это

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

Затем используйте css, чтобы получить & quot; top & quot; разделите фиксированное положение сверху, «снизу»; разделите фиксированное положение внизу. Вы также должны указать «контент». разделите верхний и нижний отступы, чтобы учесть & quot; верхний & quot; и "снизу" дивы.

Error: User Rate Limit Exceededjsfiddle.net/3V2HP/1 Tina CG Hoehr

Похожие вопросы