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:
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.
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.
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 ).
Something like this:
http://jsfiddle.net/p75LE/2/
?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With