2

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

framp
  • 813
  • 11
  • 22

2 Answers2

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

Community
  • 1
  • 1
box86rowh
  • 3,415
  • 2
  • 26
  • 37
  • Thank you for the link, I didn't think this could be "only" CSS It's a pity it is not crossbrowser and webkit only! – framp May 12 '12 at 03:23
0

you can custom the events onmousedown and onmouseup, when you focus out of the window, it still happening.

Lerous
  • 33
  • 6
  • 1
    But unfortunately I can't track the mouse position out of the window in the same way as with a native scrollbar. The practical effect is that if you happen to drag the handle outside the window you get a harsh stop. – framp May 12 '12 at 03:27