4

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

Tina CG Hoehr
  • 6,721
  • 6
  • 44
  • 57
  • something like this: http://jsfiddle.net/3V2HP/3/ ? – Christoph Apr 17 '12 at 13:54
  • **Why** would you want this? It feels horribly confusing and not usable. How do you justify separating the scroll from the scrolled box? – ANeves Apr 17 '12 at 14:07
  • @ANeves It's simply the feeling of a fixed padding. Comes in handy sometimes. To get even more funky: http://jsfiddle.net/3V2HP/4/ with fade-effect:-D – Christoph Apr 17 '12 at 14:10
  • @Christoph This is close, it is just missing side padding. ANeves I want to put images in the padding, like a painting frame, so I don't want the scrollbar to get in the way of the padding "frame" and content – Heitor Chang Apr 17 '12 at 14:11
  • I'll post you a more sophisticated solution as answer. – Christoph Apr 17 '12 at 14:12
  • @Christoph's example with fade in the edges is a good one, but I am still convinced that separating the scrollbar from the scrolling content is a Bad Idea (tm). – ANeves Apr 17 '12 at 14:20
  • @HeitorChang have a look at my edited answer and see if this fits your needs. – Christoph Apr 18 '12 at 07:35

5 Answers5

14

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

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • +1. Can you please post the code here too? Or an explanation of it. – ANeves Apr 17 '12 at 15:03
  • I like this answer :) I made some changes to display images on the sides too. I did run into one problem, the scrollbar width is considered part of the container, so I had to account for its width when offsetting it. Would be OK if all scrollbars were the same, but I doubt it is, there are multiple OS and mobile phones. Anyway these are my changes http://jsfiddle.net/3V2HP/8/ The result reminds me of something out of the old Word clipart wizards – Heitor Chang Apr 17 '12 at 15:08
  • @ANeves this should be what you want: http://jsfiddle.net/3V2HP/9/ Note, that you need to adjust the dimensions of your containers if you change the padding of your scrollbox. – Christoph Apr 17 '12 at 15:12
  • @HeitorChang the width of the scrollbar indeed has to be calculated in, but luckily most OS and browsers have scrollbars with `width:20px` – Christoph Apr 18 '12 at 07:38
  • is http://jsfiddle.net/3V2HP/9/ the most up-to-date? I can notice 2-3 pixels between the scrollbar and the right bar. I ran into this problem when testing and the only idea I found was to run a JavaScript scrollbar-width-measuring function. Going too far makes the bar div cover the scrollbar and Z-indices didn't seem to help. Any ideas that don't need JS measurement? – Heitor Chang Apr 18 '12 at 14:14
  • @HeitorChang It is. It really depends on the OS + Browser. I tested in Chrome/FF/IE/Maxthon on Win7 and IE was the only one being wrong, all others displayed fine. 20px is a pretty good assumption, but if you really want to make sure you have the correct width, you need to check the width via JS :/ – Christoph Apr 18 '12 at 14:51
3

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>
Ryan Brodie
  • 6,554
  • 8
  • 40
  • 57
  • As I tried it, it works for the whole window. What can be done if this layout is needed, say inside a table cell or inside a fixed size div? – Heitor Chang Apr 17 '12 at 13:57
  • Just updated my answer to include a wrapper to solve that problem, will test it myself now, may need some tags added. – Ryan Brodie Apr 17 '12 at 14:00
  • What I meant, is, I don't want the blue padding to take up the whole window. When I change the wrapper size, the blue padding should be constrained to that box. – Heitor Chang Apr 17 '12 at 14:19
2

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.

Ben Lesh
  • 107,825
  • 47
  • 247
  • 232
0

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.

Dale
  • 10,384
  • 21
  • 34
  • Thanks for helping. No matter where I place the top bar it wants to cover the first few numbers. Also, I'd like the scrollbar to extend all the way down to the base of the bottom bar. http://jsfiddle.net/3V2HP/1/ – Tina CG Hoehr Apr 13 '12 at 23:42
0

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;
}
WizLiz
  • 2,068
  • 5
  • 25
  • 39