CODEWITHSUNDEEP
htmlcss
Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

Putting a scrollbar outside padded region

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 the obvious "padding: x" to show for my work :( I tried nesting padding and it was hilarious :)

I would like to avoid JavaScript unless it is really needed.

Current and Desired look of the page

Upvotes: 4

Views: 15591

Answers (5)

Christoph
Christoph

Reputation: 51191

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

Upvotes: 14

Ben Lesh
Ben Lesh

Reputation: 108471

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.

Upvotes: 2

Ryan Brodie
Ryan Brodie

Reputation: 6620

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>

Upvotes: 3

WizLiz
WizLiz

Reputation: 2098

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;
}

Upvotes: 0

Dale
Dale

Reputation: 10469

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.

Upvotes: 0

Related Questions