Question

How can I horizontally scroll a ul by using the mouse cursor? Basically I would like to emulate the bottom section of this image gallery. I have found a javascript method online, but it is not nearly as smooth.

Answer 1

<div>
    <ul>
        <li></li>
        ...
    </ul>
</div>  

And the Javascript:

var $div = $('div');
var $ul = $('ul');

// width of div
var width = $div.width();

// width of ul - width of div
var ulWidth = $ul.width() - width;

$div
    .on('mouseenter', function(e) {
        // get left offset of div on page
        var divLeft = $div.offset().left;

        $(window).on('mousemove', function(e) {
            var left = e.pageX - divLeft;
            // get percent of width the mouse position is at
            var percent = left / width;

            // set margin-left on ul to achieve a 'scroll' effect
            $ul.css('margin-left', -(percent * ulWidth));
        });
    })
    .on('mouseleave', function() {
        // remove mousemove event
        $(window).off('mousemove');
    })
;​

http://jsfiddle.net/aarongloege/gQyz6/

You basically need to position the ul element based on the mouse position’s percentage from the left of the viewport (div in my example).