Putting A Scrollbar Outside Padded Region

October 30, 2022 Post a Comment

How can I place a vertical scrollbar while keeping padding in all directions at all times in the content area? The picture below better describes what I am looking for. I only have

Solution 1:

This fiddle might be, what you want: Fiddle

This example contains gradients for the top and bottom parts but can be solid colors of course, if you want that.

You can play around with the padding of the #content Element, but note, that you need an additional element to the right, if you want to create a passepartout-effect.

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

edit: changed the fiddle link, the old link with the gradients is the following: Fiddle

Solution 2:

Do it with Div's. 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>

Solution 3:

Browsers are responsible for rendering native scrollbars. All browsers that I know of will render the vertical scroll directly to the right of your box model.

So if you want to have a scroll bar that is not directly attached to your content, you're going to have to use a javascript scrollbar of some sort. Have a look at how to use the Slider control from JQuery UI as a scroll bar.

The essence of how to do this is to handle some sort of scrolling event, either from a slider or from an actual scrollbar somewhere, then use the value from it to alter the margin-top css value of a div that is inside of another div with overflow:hidden.

Solution 4:

One approach off the top of my head would be to use two divs inside the scrolling region

something similar to this

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

Then use css to give the "top" div a fixed position at the top, the "bottom" div a fixed position at the bottom. You would also need to give the "content" div a top and bottom padding to account for the "top" and "bottom" divs.

Solution 5:

If I understand this right, you could define a size for the div or whatever contain the numbers then use the css overflow property :

div{
   overflow:scroll;
}

Html5 Guide