Mouse events on scroll bars.

Shows that mouse events are sent for mouse operations on scrollbar. clientWidth is the way to detect whether or not a mouse event is on a scrollbar or not.

by lddubeau

HTML

<div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet velit vel placerat convallis. Ut non mauris vitae leo posuere ultricies. Phasellus feugiat faucibus leo. Aenean eu luctus sem. Nullam hendrerit tincidunt aliquet. Phasellus fermentum erat ipsum, ac convallis risus ultrices in. Etiam ut lacus ac massa pellentesque mattis. Donec non elit imperdiet, ornare arcu sit amet, sollicitudin eros. Nunc massa urna, elementum nec ante ac, vehicula ornare leo. </p>
</div>
<div id="log"></div>

CSS

#container {
    max-width: 200px;
    max-height: 100px;
    overflow: auto;
}

JavaScript

function toString(dom) {
    var ix = dom.outerHTML.indexOf(">");
    return dom.outerHTML.slice(0, ix+1);
}

$(function () {
    var $container = $("#container");
    var $log = $("#log");
    
    function log(text) {
        $log.append($("<p>").text(text));
    }
    
    log("width: " + $container.width() + ", innerWidth: " + $container.innerWidth() + ", clientWidth: " + $container[0].clientWidth);
    
    $container.on("mouseup mousedown", function (ev) {
        var x = ev.pageX - $container.position().left;
        log(ev.type + " " + x);
    });
    
});