0

Hi Can anyone help me to detech 3 event in jquery.

I want when user scroll down it show log down scroll when user scroll top it show log top scroll when user stop scrolling top it show log stop scroll

I want when user scroll down it show log down scroll when user scroll top it show log top scroll when user stop scrolling top it show log stop scroll

Kunal Verma
  • 65
  • 6
  • check this question https://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event – Maulik Oct 28 '22 at 06:52
  • @Maulik I am able to detect up scroom and down scroll but I am stuck in when user stop scrolling. Basically I add diffent css on both 3 event when user scroll top I want add css 1 when user scroll down I want add css 2 when user stop scrolling I want add css 3 – Kunal Verma Oct 28 '22 at 07:01
  • 1
    check this also https://codepen.io/ant1mas/pen/KMVZrb and this http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/jquerymobile/event_scrollstop.asp.html#gsc.tab=0 – Maulik Oct 28 '22 at 07:07

1 Answers1

0

check this example for all 3 events

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("scrollstop",function(){
    console.log('stop');
    console.log('your css 3 here');
  }); 
$(document).on('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
        console.log('your css 1 here');
    }
    else {
        console.log('Scroll down');
        console.log('your css 2 here');
    }
});

</script>
</head>
<body>
</body>
</html>
Maulik
  • 87
  • 7