Bind mousemove to mousedown event (jQuery)

StackOverflow https://stackoverflow.com/questions/4547156

  •  13-10-2019
  •  | 
  •  

Question

I am creating a horizontal scroll site. Don't hate! Everything seems to be working fine except when i bind the mousemove event on mousedown the dom scrollLeft property is not changing. 'moving' and 'mouseup' are both being written to the console at the appropriate times. Here is my code... EDIT: Also, I noticed that if I write $('#container').scrollLeft to the console on mousedown it returns 'function()' instead of a value.

$(document).ready(function() {
    $('#container').mousedown(function(event) {
        $(this)
            .data('down',true)
            .data('x',event.pageX)
            .data('scrollLeft',this.scrollLeft)
            .css({'cursor':'url("http://www.loodieloodieloodie.com/images/closedhand.cur"),auto'});
        $('body').bind('mousemove',function(event) {
            console.log('moving');
            $('#container').scrollLeft = $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2;
        }).bind('mouseup',function() {
            $('#container')
                .data('down',false)
                .css({'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto'});
            console.log('mouseup');
            $(this).unbind('mousemove');
        });
        return false;
    }).css({
        'overflow':'hidden',
        'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto'
    });
});

and here is the basic html...

<body>
    <div id="container">
        <div id="inner">
            CONTENT
        </div>
    </div>
</body>

Thanks for the help, B

Was it helpful?

Solution

There is no .scrollLeft property on jQuery objects, so instead of tis:

$('#container').scrollLeft = $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2;

You need a .scrollLeft() function call like this:

$('#container').scrollLeft($('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2);

or a .css() call, like this:

$('#container').css({ scrollLeft: $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2 });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top