Custom scrollbar, native behaviour (August Lilleaas' blog)

Tldr: Use a hidden native scrollbar for scrolling, use JavaScript to read it's current position, move the custom scrollbar based on the position of the native scrollbar. Mouse wheel, page up/down, physical scrolling on Macs, etc, works just as expected.

Noscript clients gets a normal native overflow scroll.

Disclaimer: this particular custom scrollbar is ugly. The purpose of the demo is to show how it behaves when scrolling with mouse wheel, arrows, etc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo purus et augue tincidunt ornare. Donec malesuada, erat sit amet tincidunt egestas, sapien purus eleifend libero, at consequat ipsum turpis id turpis. Etiam pharetra vulputate metus, at blandit arcu pretium id. Etiam sollicitudin justo sit amet magna gravida congue. Proin cursus auctor hendrerit. Aenean nec dolor non sapien bibendum pharetra. Quisque dignissim sollicitudin tempor. Nam et elit non ante blandit tristique. Sed sollicitudin, libero at blandit pharetra, orci metus convallis turpis, id convallis felis sem vel velit. Ut tincidunt risus ut lectus tempor et condimentum nulla facilisis. Donec accumsan neque eget ante ultricies aliquet. Fusce scelerisque ligula nec libero pulvinar aliquet. Donec vitae adipiscing ante. Sed egestas porta augue, a accumsan dui commodo nec.

Donec sodales vulputate eros sit amet tincidunt. Morbi felis enim, condimentum in ullamcorper et, condimentum quis ligula. Vivamus eget leo a elit condimentum tempus. Aliquam pretium malesuada sapien ut euismod. Integer vitae felis nisi, eu aliquet lorem. Suspendisse consectetur, odio eget facilisis aliquet, quam risus condimentum nibh, sed sagittis ante mauris gravida turpis. Proin congue mollis eleifend. Vestibulum fermentum neque ac erat congue at pharetra dolor lobortis. In vulputate lobortis elit, sed laoreet lorem commodo ut. Integer vulputate justo ut odio pharetra pulvinar. Pellentesque hendrerit libero nec purus ultricies dictum. Maecenas vitae iaculis massa. Vivamus eget massa sed ipsum eleifend bibendum ut sit amet massa. Nam vehicula felis a enim iaculis nec tincidunt nunc sagittis.

Aliquam eget lectus metus, ut feugiat turpis. Morbi nec augue iaculis justo euismod bibendum ornare non erat. Sed a eros turpis, in vulputate arcu. Quisque scelerisque nisl in metus tristique in ultrices metus elementum. Donec ultrices orci sit amet eros porttitor et pretium purus pharetra. Nullam in urna dui. Nunc urna nisi, scelerisque eu lacinia at, ullamcorper ut dui. Donec imperdiet risus a orci cursus lobortis. Donec ullamcorper aliquam pharetra. Fusce libero velit, condimentum in bibendum eu, auctor ac sem. Maecenas vestibulum egestas nisi quis venenatis. Aliquam blandit varius mauris pretium rhoncus. Sed vel lacus a metus laoreet venenatis ultricies ut quam.

In dictum lectus in nulla suscipit a feugiat magna luctus. Praesent pharetra, dui nec commodo tristique, orci eros aliquam risus, non sollicitudin justo urna non erat. Donec lorem mi, pulvinar scelerisque sagittis ac, accumsan at turpis. Aliquam in nulla nunc, sed dictum dui. Duis ullamcorper mi nec lacus pretium nec tempus neque facilisis. In eget justo tellus. Curabitur ultrices molestie tortor, in molestie libero imperdiet vel. Nunc a purus quis augue fermentum tristique. Aenean id turpis eget diam euismod hendrerit. Duis in libero quis metus venenatis rhoncus. Etiam et massa orci, et consequat enim. Ut metus leo, posuere vel blandit vitae, fermentum sit amet est. Aenean condimentum, massa et imperdiet pulvinar, justo magna luctus massa, vel viverra nisl elit sed erat. Proin eget eros vel mi pharetra pretium in sit amet nulla. Sed lobortis ipsum vel tellus sodales porta. Nulla vehicula, velit vel venenatis fringilla, libero ligula facilisis est, vel consequat neque elit nec orci. Duis tincidunt quam eget tortor aliquam mattis ac nec magna. Aenean tempor venenatis suscipit. Morbi eu elit risus, at consectetur massa.

Duis at augue ut tortor consequat cursus. Nullam adipiscing porta congue. Curabitur blandit nulla at turpis lobortis at congue neque sagittis. Sed a tellus vel justo pharetra ultrices vitae hendrerit tellus. Nullam eget risus leo, eu imperdiet dolor. Donec a nibh justo. In non lacus sed ante laoreet sodales. In facilisis convallis nisl, sit amet facilisis tortor accumsan eu. Nullam et elit odio. Nam consequat eros nec orci pulvinar vulputate. Phasellus eu faucibus tortor. Proin eget eros sapien, dignissim eleifend lacus. Mauris ultricies pharetra odio ut venenatis. Suspendisse tincidunt eleifend semper. Sed vehicula euismod ipsum, vel scelerisque metus tempor id. Fusce est velit, bibendum non viverra sit amet, suscipit nec lacus.

Browser compatibility

Windows XP: IE6, IE7, IE8, IE9
Mac OS X: Firefox 2.0, Firefox 3.0, 3.5, 3.6, Chrome 7, Opera 10.6, Safari 5.0.2
GNU Linux: Firefox 3.6, Chrome 7
Safari on iOS: Not compatible. Doesn't support CSS overflow scrolling.
Android: Not compatible, for the same reasons as iOS.

A box with a scrollbar

.custom_scroll_bar {
    width: 400px;
    height: 200px;
    border: 5px solid #ccc;
}

.custom_scroll_bar .native {
    overflow-y: auto;
    height: 200px;
}

<div class="custom_scroll">
  <div class="native">
    <div class="content">Content here.</div>
  </div>
</div>

Move the scrollbar

Using the CSS and HTML above, we add .custom_scroll_bar .content { width: 200%; }.

Size the content

We're setting the width of the content .custom_scroll_bar .content { width: 400px; }, which is the width of the .custom_scroll_bar element.

Hide the native scrollbar

Setting .custom_scroll_bar { overflow-x: hidden; } hides the native scrollbar.We can now scroll the element as if it had a native scrollbar, but with the luxury of it not being visible.

Use scroll event to draw custom scrollbar

The final result! We're doing a number of things here.

We hook into the scroll event of .custom_scroll_bar .native. In it we set the position of the scroll handle.

The scroll handle is created with JavaScript, so that it isn't visible on noscript clients.

We hook the mousedown event on the scroll handle and use it to set the scrollTop property of the .custom_scroll_bar .native as we move the handle.

We hook the scroll event of .custom_scroll_bar and set it's scrollLeft and scrollTop properties to 0. That way we avoid horizontal scrolling when dragging and selecting text.