Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set up the browser scrollbar to scroll part of a page?

I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?

like image 395
airportyh Avatar asked Sep 17 '08 13:09

airportyh


People also ask

How do I customize my browser 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 you make a scrolling section in HTML?

Use CSS: . scrollbar { height: 100px; overflow: auto; // here is the magic :) }

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.


1 Answers

That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.

like image 181
Tom Ritter Avatar answered Oct 14 '22 15:10

Tom Ritter