MagicScrollbar, a new Jetpack experiment

You know, when loo­king at a page on the web, our indi­ca­tion of it’s length is the size of the scroll bar in our brow­ser win­dow (if it’s small, the page is long).

Some­ti­mes, our assump­tion about the arti­cle’s length is wrong because while scrol­ling you see that most of the page is com­ments.

Tho­mas Hoo­per pro­po­sed a nice solu­tion. I deci­ded to tweak his code and adapt it to Jet­pack. The solu­tion con­sist in dis­playing what por­tion of the page is arti­cle and what is com­ments.

It’s quite dif­fi­cult to find an gene­ral algo­rithm which can work on quite all web­si­tes, so I deci­ded to focus on, a kind of French Sla­sh­dot. It could have been Sma­shing Maga­zine too.

On, arti­cles are com­po­sed of :

  • The main arti­cle
  • An optio­nal second part
  • Nes­ted group of com­ments

It looks like:

Like my other Jet­pack expe­ri­ments, the MagicS­croll­bar is a just a proof of con­cept which lacks of polish. The user is able to see what the page con­tains in rela­tive pro­por­tions: the arti­cle and the dif­fe­rent groups of nes­ted com­ments. Unfor­tu­na­tely, I can’t find an easy why to have access to the win­dow docu­ment in Jet­pack scripts, so I had to use a lot of tricks to get things done.

By default the MagicS­croll­bar is almost hid­den and it appears on hover like in the fol­lo­wing screen­shot. You can see the arti­cle on

By the way, I have totally revam­ped my Jet­pack labo­ra­tory and, as always, the code is still a mess.

Haut de page