StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I had a similar situation: </p> <p>I believe the scroll bar is not actually a part of the webpage - it's an operating system level component. However, I was able to get around my issue by monitoring the mouse position over a parent element (with has an initial height and width value via css - that might be optional, I'm not certain. My code below was used in a slightly different context but I think it is applicable still).</p> <p>The child elements width is re-sized upon needing the scrollbar(the width is decremented by 18 pixels, in Chrome). However, the parent element/container's width remains the same width. Because it stays the same width, we can add a mousemove event and check to see if the position of the cursor falls into that 18px gap where the scrollbar appears in the child element.</p> <p>Also, depending on what exactly you mean by scrollbar (the entire bar; shaft, buttons, thumb and all) or components of the scrollbar you can achieve the functionality with the assistance of doing some calculations.</p> <p><strong>Entire Scroll Bar - mouse over</strong></p> <pre><code>$(".parent").bind("mousemove",function(e){ if($(".partent").width() <= e.offsetX){ //display tool-tip div }else{ //If displayed, hide tool-tip div } }); </code></pre> <p><strong>Scroll Bar Thumb - mouse over</strong></p> <pre><code>$(".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 } }); </code></pre> <p><strong>Additional Mouse Out</strong></p> <pre><code>$(".parent").bind("mouseout",function(e){ if($(".child").width() <= e.offsetX){ //If displayed, hide tool-tip div } }); </code></pre> <p>I've only tested this in Google-Chrome on Windows 7, I think the magic numbers (36,18) would need to be tweeked for different Operating Systems but would be relatively similar in value.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload