listen for mouse events … except a div's overflow:scroll scrollbar?

Question

Any suggestions for how to listen for mousedown on $(document) except a div's overflow:scroll scrollbar?

I am not sure what element the scrollbar is in order to refer to it...

in your mousedown handler, look at event.target. that'll tell you what the element is — MrOBrian, Aug 10 '12 at 19:51
Changing `mousedown` to `click` as suggested by @adeneo in [comment](http://stackoverflow.com/questions/11908292/listen-for-mouse-events-except-a-divs-overflowscroll-scrollbar#comment15854666_11908377) worked for me — Anupam, Nov 16 '16 at 12:24

score 2 · Accepted Answer · answered Aug 10 '12 at 19:54

2

You can check the target yourself with :

$(document).on('mousedown', function(e) {
    console.log(e.target);
});

FIDDLE

The scrollbar is'nt really an element, and click handlers won't work, but it seems mousedown is fired, but will just give you the element the scrollbar belongs to.

To exclude just the scrollbar I'm guessing you will have to figure out it's size, and then check the mouse position on mousedown to see if it's within the scrollbar area.

answered Aug 10 '12 at 19:54

adeneo

312,895
29
395
388

And how to calculate the scrollbar area? – jedierikb Aug 10 '12 at 20:01
1

That's a little complicated, first you need to create some elements and check the size with and without scrollbars to find the size (it's usually 16px, but you never know), then you'll need to get the mouse position from the event.pageX/Y etc. and finally the elements position, and then figure out if the mouse was pressed in the scollbar area or not. If possible it would be a lot simpler binding to click instead of mousedown, as click does'nt fire on the scrollbar anyway. – adeneo Aug 10 '12 at 20:23
this might prove helpful: http://stackoverflow.com/questions/986937/javascript-get-the-browsers-scrollbar-sizes – jedierikb Aug 16 '12 at 01:44

score 0 · Answer 2 · answered Aug 16 '12 at 17:29

<div class='scrollHolder' style='overflow:scroll;'>
<div class='scrollContent'>
</div>
</div>

$(document).on( "mousedown", function( event )
{
    var onScrollbar = false;
    if (event.target.className == "scrollHolder")
    {   
        var s_c = $(event.target).children(".scrollContent");

        if (event.pageX-s_c.offset().left > s_c.innerWidth())
        {
            onScrollbar  = true;
        }
    }
});

listen for mouse events … except a div's overflow:scroll scrollbar?

2 Answers2

Linked