Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to make a scroll bar outside of the content it's scrolling?

Tags:

css

Now, if the background weren't textured I could do some CSS trickery with padding / margins and such.

When you do a scrollable div (which is what I'm doing now) like this:

overflow: auto;
height: 80%;

the scrollbar appears on the inside of the div that is being scrolled

Here is a mock up of what I'm trying to do:

enter image description here

like image 973
NullVoxPopuli Avatar asked Nov 29 '11 17:11

NullVoxPopuli


People also ask

How do I create a custom scrollbar?

For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.

How do I change the position of my scroll bar?

We can use the CSS “::-webkit-scrollbar” property which is responsible for changing the shape, color, size, shade, shadow, etc. of the scroll bar. But, here the property which we will use is the direction property of CSS for changing the position of the scroll bar.

How do I get the scroll bar to show when I overflow?

Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).


1 Answers

Something like this:

http://jsfiddle.net/p75LE/2/

?

like image 172
ptriek Avatar answered Oct 18 '22 04:10

ptriek