Skinned HTML Scrollbar

Well, usually I don't comment my work, but this one being a "pure technical demo", and as I had to place some content here, I will make an exception.

Once upon the time I stumbled upon the great fleXcroll: Cross Browser Custom ScrollBar script by Hesido.

I was very curious to see how this was done and even possible, but looking at the JS code, I couldn't understand a bit of it. Sort of disappointed, I decided to "reinvent the [mouse] wheel" and see what I could do myself.

As always, it was just a "pushing the envelope" kind of exercice, and it might or might not work for you. Please don’t use this in your production sites as it could divide by zero and blow up destroying the world.

My expectations:

• Minimal and plain old JS code
• No CSS hack, no "bugs compliant" features, minimum browsers work-arounds
• No JS mousewheel and keyboard event: just hook to the native OS scrolling mechanism (that's the trick, the actual scrollbars are still there, the script is just painting on top of them)
• Skinned scrollbars 100% CSS positionned, by the browser itself and not by my JS code - no lag on resize (that's the second trick)
• Zero CPU cycle used when idle - no setInterval loop

Findings :

• Avoid reading cascaded style sheet from JS (that's a mess)
• Avoid dealing with computed vs. cascaded browsers inconsistencies (that's another mess)
• Firefox is unable to know whether the left mouse button is pressed or not
• SAFARI will handle JS events outside of its window (and that's great!)

Known issues:

• Will manage vertical scrollbars only
• Won't work in Opera (onmouseup event won't fire, drawings/refresh artifacts)
• Firefox won't release the left mouse button outside of the browser windows

Developped using Firefox 2.0 + Firebug 1.0. Tests successfully passed on SAFARI win 3.0, Firefox 3 (latest alpha), IE6 and IE7.

That's all folks,

happy dhteumeuleuing :)

GF Nov 2007

Lorem ipsum dolor sit amet, etiam parturient vel tincidunt porta, semper lectus etiam vestibulum, rutrum dictum varius tempor, nam id elit wisi, praesent neque nulla nostra aliquam sed. Diam nec adipiscing potenti in sit. Ut ac. Diam ac, ornare phasellus, nullam dapibus duis pede feugiat nunc volutpat, tellus cras dignissim, leo hac. Cursus mollis elementum etiam massa integer, rutrum at. Quis a ligula, condimentum ac ac, amet lorem erat ac praesent ut, auctor justo amet nulla at donec justo. Nunc ac eu a, eros massa nonummy, nec aenean erat platea, placerat est, tristique ridiculus eleifend odio massa. Suspendisse nulla elit, eu sit est amet ante, eros amet ut fames nibh tincidunt aliquet, nunc tristique tellus, erat ultrices eros nonummy adipisicing vel. Dolor egestas euismod libero. Erat vitae elit vero neque, donec magna, mauris erat neque, magnis amet sed ligula in non. Rhoncus blandit, mi elementum cursus elementum turpis. Vel massa, magna nulla facilisis egestas elit placerat.

Sed turpis praesent animi, vestibulum libero sed, suscipit diam nulla. Nunc at sed habitant, consequat sociis morbi, vivamus massa, metus eu wisi convallis ut varius varius. Lacinia id eu. Elit lorem wisi tellus, blandit turpis a rhoncus libero, consequat quis sit. Vestibulum arcu consectetuer leo. Id id, duis odio quis dolor vestibulum scelerisque in, cras suscipit consequat et eget rhoncus integer. Cursus eu vulputate in, nunc volutpat in feugiat et, ut fusce est in vestibulum turpis, donec nec, leo torquent arcu morbi. Eleifend et, molestie vehicula dui scelerisque nec, tempor ipsum amet etiam eget, in varius ac dui morbi eros. Vitae pellentesque mauris rhoncus duis vivamus nulla, excepturi tincidunt integer tincidunt cum ac fusce, ornare cras urna maecenas. Aliquam tellus habitant diam suspendisse, leo dolore ultrices luctus lacus elit velit, enim consequat praesent luctus nibh elementum cras, luctus morbi nunc id dictum, imperdiet leo cras. Adipiscing at, gravida quisquam vivamus ut sociosqu, nulla imperdiet habitant ac sollicitudin vulputate, lobortis vehicula praesent, fames ad enim fermentum suscipit mauris dignissim.

Nulla at. Mi sit libero, sed sit a. Natoque nam sem mauris justo erat, bibendum tincidunt urna at, nec vel vitae in, metus dictum. Libero curabitur condimentum a vestibulum a, iaculis nulla imperdiet, eu amet, id dui. Ipsum metus gravida tristique urna. Risus et scelerisque, mi sit vivamus sodales volutpat vehicula eu, nunc et, porttitor nonummy vel lacus. Urna nec sit, vitae et ante id tortor pharetra.

Morbi lobortis nascetur consectetuer, eget tempor, id sed donec natoque feugiat, mauris a mauris at faucibus. Euismod fringilla velit ultricies sed nulla, lacus libero non ornare vitae proin. Proin nullam gravida sem id eleifend, consectetuer velit integer at elit lacus dictum. Nulla dui fermentum, fugiat etiam sit curabitur, libero feugiat et orci dis amet, mauris justo elit mauris mattis, eget ac aperiam viverra vivamus metus. Nascetur quis natoque purus duis sit. Vel sociis asperiores adipiscing eleifend, eu mauris, ut vitae ullamcorper pede sit, pretium gravida mauris duis quam vel. Ut nulla sit, elementum fringilla phasellus elit varius wisi, eu facilisis adipiscing a mollis, turpis praesent risus et, luctus sollicitudin aptent consequat. Pellentesque elit egestas maecenas ea, tortor lacus, sed erat. Vestibulum lobortis, aliquam feugiat in quis, sapien non nam magnis morbi vestibulum augue, sapien curabitur nulla pede nec vehicula lacus, netus vivamus. Fusce tincidunt quis ut, non dui fringilla aliquam, lorem sed lorem ipsum nam. Netus eu nec, accumsan fusce, parturient nonummy a luctus, neque dictum sodales diam habitasse, aliquam morbi lorem tincidunt facilisis et etiam. Donec at curabitur vitae, sit blandit malesuada, et non non egestas eget enim.

In tristique pharetra a, pretium amet, et rutrum habitasse commodo non tortor. Dui dictum lorem mauris, ut cursus feugiat, in neque nec. In ac sapien nec ornare, nec vehicula habitant sollicitudin ornare pharetra at, enim parturient convallis mauris interdum, pellentesque ultricies venenatis adipiscing faucibus, quam ligula. Sint mattis. Dignissim lacus sit, vestibulum eget id, adipiscing tincidunt potenti inceptos quis non, iaculis tortor, netus taciti eu commodo aliquam. Massa eu ut sed lectus. Mauris tortor vitae, pellentesque lectus integer, dolor libero, egestas lorem turpis quisque. Et natoque mauris sed leo quis. Sapien integer morbi non commodo metus. Rutrum nostra non morbi nulla aliquam massa, id lorem eros, sodales mi.

Enim quam, diam enim faucibus in dictum donec tincidunt. Elementum ipsum nunc arcu non phasellus at, sed mi duis nostra conubia nam, hac voluptatem massa porttitor, posuere gravida at, sodales eget mauris mauris eget pellentesque. Lorem pede arcu vivamus suspendisse, lectus neque. Mollis et enim convallis velit eros lobortis, leo lorem risus aliquam non sodales, sed interdum in. In nullam cum purus tristique in, fusce eros ut vestibulum donec, phasellus urna porttitor primis eu, aliquet odit vestibulum quam aenean maecenas, et proin ultricies feugiat nec sed in.