How to display javascript hint when mouseover over scrollbar?

Question

How to create a javascript popup tooltip when a user iterates through the scroll bar of a browser window?

Answer 1

The people in your comments are correct. You cannot do this with browser-based scrollbars, you have to use a custom one made from html css and js.

I HIGHLY recommend http://jscrollpane.kelvinluck.com/ I had nothing but good luck with this scroll solution. After installing jScrollPane, you can do something as simple as $('.jspVerticalBar').hover(function(){... and even customize the style and control parts of the scroll bar. Like hovering over a track or dragging and dropping.

Answer 2

I had a similar situation:

I believe that the scrollbar is not really part of the webpage - it is a component of the operating system level. However, I managed to get around my problem by observing the position of the mouse over the parent element (with the initial value of height and width via css - this may be optional, I'm not sure). My code below was used in a slightly different context, but I think it is applicable yet).

The width of the children is resized to fit the scrollbar (width is reduced by 18 pixels, in Chrome). However, the width of the parent / container remains the same width. Since it remains the same width, we can add the mousemove event and check if the cursor position falls within this 18px span, where the scroll bar is displayed in the child.

In addition, depending on what exactly you mean by the scroll bar (the entire drum, axis, buttons, thumb and all) or the components of the scroll bar, you can achieve functionality with some calculations.

Entire scroll bar - mouse pointer

 $(".parent").bind("mousemove",function(e){ if($(".partent").width() <= e.offsetX){ //display tool-tip div }else{ //If displayed, hide tool-tip div } }); 

Thumb scroll bar - mouse pointer

 $(".parent").bind("mousemove",function(e){ if($(".child").width() <= e.offsetX){ var scrollbarHeight = $(".parent").height() - 36; //36 = height of both up and down arrows var scrollbarThumbHeight = scrollbarHeight/$(".child").height(); var scrollTopPosition = $(".parent").get(0).scrollTop; var relativeThumbPosition = (childScrollTop/$(".child").height()) + 18;//18 = offset from the up button if(e.offsetY >= relativeThumbPosition && e.offsetY <= relativeThumbPosition+scrollbarThumbHeight){ //display tooltip div }else{ //If displayed, hide tool-tip div } }else{ //If displayed, hide tool-tip div } }); 

Extra mouse

 $(".parent").bind("mouseout",function(e){ if($(".child").width() <= e.offsetX){ //If displayed, hide tool-tip div } }); 

I only tested this on Google-Chrome in Windows 7, I think that magic numbers (36.18) would need to be tweeked for different operating systems, but would be relatively similar in cost.