Question

How do I create a jquery-powered vertical scroll of div contents on hover, not on click?

Check out this example. Try hovering the rightbar under the flags. It will start scrolling the content the way your mouse hovers.

I’m not sure how to do this.

Answer 1

We can’t exactly just give you the answer to this, but as a hint you would have to use the mousemove event and detect where, within the panel, the mouse is. Set overflow: hidden; and move a relative speed to how close the mouse is to the edge. I’d recommend using two divs – one outer div to set the boundaries (detect mousemove on this div) and then the other one absolutely positioned.

It would be something like this:

HTML:

<div id='outer'>
    <div id='inner'>
        <p>Overflowing content here</p>
    </div>
</div>

CSS:

#outer {
    height: 200px;
    width: 150px;
    position: relative;
}

#inner {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
}

jQuery:

$(document).ready(function() {
    $("#outer").mousemove(function(e) {
        //Refer to [here][1] to get position of mouse within element.
        //Get position of mouse within the element, if it is at the top then compare how close it is to 0, if it is at the bottom then compare how close it is to 200px (or whatever you set as the height of the outer container). Slide inner container as appropriate.
    });
});