GL Veneer Scroll on Hover

by Brian Duffey

HTML

<div id="test">
    <div id="test2"></div>
</div>

CSS

div#test {
    width:100px;
    height:300px;
    overflow-y:scroll;
    overflow-x:hidden;
}
div#test2 {
    background-color:blue;
    width:1000px;
    height:1000px;
}

JavaScript

var scroller;

function scroll(obj, scrollInterval) {
    jQuery(obj).scrollTop(jQuery(obj).scrollTop() + scrollInterval);
}

jQuery(function () {
    jQuery('div#test').live('mousemove', function (e) {
        //sets area for scrollbar arrows
        var scrollbarDimension = 18;
        //next two variables set speed of scrolling
        var scrollLag = 100;
        var scrollInterval = 20;
        //leave these variables alone
        var container = jQuery(this);
        var divHeight = jQuery(this).height();
        var divWidth = jQuery(this).width();
        var parentOffset = jQuery(this).offset();
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;
        if (relY > (divHeight - scrollbarDimension) && relX > (divWidth - scrollbarDimension)) {
            //down arrow
            clearInterval(scroller);
            scroller = setInterval(function () {
                scroll(container, scrollInterval);
            }, scrollLag);
        } else if (relY < (scrollbarDimension) && relX > (divWidth - scrollbarDimension)) {
            //up arrow
            clearInterval(scroller);
            scroller = setInterval(function () {
                scroll(container, (scrollInterval * -1));
            }, scrollLag);
        } else {
            //in div but not over an arrow
            clearInterval(scroller);
        }
    }).live('mouseleave', function () {
        //no longer in div
        clearInterval(scroller);
    });
});