CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kesong Xie
Kesong Xie

Reputation: 1396

Stop cursor from changing on a cursor div when the user scrolling the document jquery

Today I found out that Google+ set the cursor to initial when the user is scrolling, and the cursor won't change when hovering on all the hyperlinks or images while the user is still scrolling

How can I stop cursor from changing when the user is scrolling through divs with css attribute set to pointer. I have noticed that if the cursor keep changing when the user is scrolling, the scroll is not as smooth as when the cursor is unchanged. I have tried

$(window).scroll(function(){
        console.log('scrolling');
        $('body').css("cursor", "initial");

    });

but it seems it doesn't work, and other children's css attribute has overwritten the line, I didn't found any similar questions on Stack overflow, can someone point me to the right direction?

Upvotes: 0

Views: 727

Answers (1)

Kesong Xie
Kesong Xie

Reputation: 1396

Thanks to link provided by CBroe, disable cursor event when scrolling I have found that what I need is to add pointer-events: none; to the body when the user is scrolling and remove it when the user stop scrolling.

first we need to add a class called disable-hover to our css file

.disable-hover {
  pointer-events: none;
}

second we need to detect whether the user is scrolling and add or remove the class correspondingly

$(window).scroll(function(){
        $('body').addClass('disable-hover');

    });


    $(window).scrollStopped(function(){
        $('body').removeClass('disable-hover');
    });

that's it!

scrollStoppped plugin is contributed by Jason to detect the scrolling has stopped

detect scroll stop

Upvotes: 1

Related Questions