Question

I’m trying to reproduce a functionality I’ve seen in Google Docs.

Google Docs scrollbars sport a custom look and are obviously not the natives one but if I mousedown on the handle, move the mouse out of the window and drag the mouse up and down, the scrollbar will work accordingly.

I tried looking at the compressed code but I didn’t found the solution yet.
I’ve created a custom made scrollbar with a mousedown event on the handle which add an event listener to the body on mousemove.
But I’m obviously not able to detect the mouse going out of the window and the scrollbar usability is pretty lame because of this.

How do they manage to track the mouse movement even out of the window?
Is there some better crossbrowser, clever way I’m missing?

Thanks in advance

Answer 1

All they are doing is using css to style the built in scroll functionality of a div that has the overflow-y set to scroll.

Just use your developer tools on chrome or firefox to see this.

Custom CSS Scrollbar for Firefox Info on styling scroll bars