View Full Version : How to make the scrollbar only scroll content???

08-06-2007, 04:04 PM
I posted this on another forum but i thought i'd give you guys a try aswell.... (somebody must know)

I want the scrollbar to remain on the far right of the browser. But when scrolled i only want the content (which is in one single content div) to move...

Is this even possible...

Please help

(I dont want to use iframes or normal div (overflow:scroll) etc... cos that makes the scrollbar on the right of the div... I want the scrollbar to remain where it normally is on the browser...)

[Edited on 8/6/2007 by padiq]

Altered Sky
08-06-2007, 04:37 PM
I think you want something like this here: http://stelliollc.com/
If I'm correct, I think you can find the answer on their own source code:

#fixed {position:absolute;left:40px;top:55px;width:140px; height:200px; }

body > div#fixed { position: fixed; }

The position:fixed attribute in css is forcing the div to the top left at all times. Despite the rest of the page being scrolled.

[Edited on 8/6/2007 by Altered Sky]

08-06-2007, 04:52 PM
Thanx....altered sky

Still one question:

If you have a look CLICK HERE (http://www.dynadeo.com/uploads/samples/) You'll see that everything is perfect other than that vertical grey bar which is meant to be positioned to the left of the content. The only thing scrolling is the content which is good...BUT... since that grey bar must be fixed position i have to give it a top and left value: the "top" value is fine cos it stays consistent but the left value is a problem when people resize the page --i hope u understand cos i have not explained it that well.....

i've positioned the grey bar in the wrong place purposely to show u what i mean... If u try resizing the window u'll see what i mean...

[Edited on 8/6/2007 by padiq]

Altered Sky
08-06-2007, 07:42 PM
Your problem is this:
Because you have your page centered, the distance the gray div is from the left changes for every viewer based on resolution and browser window size! In the site I showed you, the page was aligned to the left so their nav div was always left:0px;

Because yours is centered, you need to use javascript to determine the x size of their browser window and how many pixels over the gray div needs to be. Then the javascript needs to change the css attribute of the gray box to be in the right place. This could be kind of difficult if you don't have any JS experience. A simple fix would be left aligning the page like stelliollc.com does then you could do it with just css. I hope this makes sense!

08-07-2007, 12:26 PM
Awesome thanks altered sky....i have changed it quite a bit to this (CLICK (http://www.dynadeo.com/uploads/1/)) now so i no longer have that vertical bar and the 'left' issue..

[Edited on 8/7/2007 by padiq]

Altered Sky
08-07-2007, 02:07 PM
Very nice looking website. Job well done! I only have one critique: Aside from the top header bar, there is an awful lot of gray. I think the HOME box could maybe be another color? I might also change the border around the content to a darker gray or black even to separate it from the background more. Overall very easy to read and very nice on the eyes. Nice job