CODEWITHSUNDEEP
javascriptjqueryanimationscrollmouseevent
Alex G.
Alex G.

Reputation: 277

Use mouse scroll on div to trigger animation?

<div class="page">
      div content
</div>

<script>

if( scroll mouse up while hovering #page )
$('.page').animate({'left':'+40px'});

if( scroll mouse down while hovering #page )
$('.page').animate({'left':'-40px'});

</script>

I want to do something like the example above. Can someone help me?

Upvotes: 1

Views: 2057

Answers (2)

elclanrs
elclanrs

Reputation: 94101

You can detect up and down scrolling with the native scroll() jQuery function like so:

var tempScrollTop, currentScrollTop = 0;

$('#div').scroll(function () {
    currentScrollTop = $('#div').scrollTop();
    if (tempScrollTop < currentScrollTop) {
        // UP
    } else if (tempScrollTop > currentScrollTop) {
        // DOWN
    }
    tempScrollTop = currentScrollTop;                   
}

Taken from the comments in http://api.jquery.com/scroll/

Upvotes: 0

ori
ori

Reputation: 7847

You can use this mousewheel plugin and then:

$('.page').mousewheel(function(event, delta) {
    event.preventDefault(); // if you want to prevent the window from scrolling

    $(this).animate({left: (delta>0 ? '+' : '-')+'40px'});
});

Upvotes: 2

Related Questions