CODEWITHSUNDEEP
javascriptjqueryhtmlscrollcursor
user1667057
user1667057

Reputation: 51

Change cursor when div scrolls up or down

I have a div that implements Scriptperlative's CursorDivScroll script. How can I implement two customized cursors in the div that is using the script; one that shows when scrolling down and one that shows when scrolling up? Here is the javascript and HTML that I have thus far. The javascript is just the CursorDivScroll script.

 <script type='text/javascript' >
     $(document).ready(function() {
 CursorDivScroll( 'repertoirescroll', 40, 40 ).noHorizontal();
     });
 </script> 


 #repertoirescroll {
 cursor: url(../images/arrow.png), auto;
 position:relative;

 }

Thanks for any help in advance. I think I need to implement an if statement that says if mousemove = mousedown use this cursor else if mousemove = up use this cursor...? Not sure how to do this.

Upvotes: 0

Views: 1592

Answers (1)

adeneo
adeneo

Reputation: 318212

Checking if the scrollTop is decreasing or increasing should tell you if it's scrolling up or down, and then just set the cursor based on that when scrolling, and use a timeout to reset the cursor when scrolling stops :

var top=0, timer;

$(window).on('scroll', function() {
    clearTimeout(timer);
    var scrollTop = $(this).scrollTop(),
        cursor = scrollTop > top ? 'pointer' : 'wait';
    $('body').css('cursor', cursor);
    top = scrollTop;
    timer = setTimeout(function() {
        $('body').css('cursor', 'default');
    }, 500);
});​

FIDDLE

Upvotes: 1

Related Questions