CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vikas
Vikas

Reputation: 749

How to detect user is scrolling the div content when scrollTop is 0?

I have a div with some elements with overflow-y: scroll property. Now, I have written jQuery code for scroll event. It works fine when I scroll the content. But when the scrollTop is 0, it doesn't work as scroll event works only when you're really scrolling. The scroll stops when the top is 0.

So is there any way to detect user is still scrolling after scrollTop is set to 0?

$("#nbody").on("scroll", function(){
       if(this.scrollTop === 0) {
         //this works only when scrollTop changes from 0+n value.
       }
});

Upvotes: 0

Views: 84

Answers (3)

Hayk Abrahamyan
Hayk Abrahamyan

Reputation: 100

You can do it by additional way like get scroll delay of user experience actually in my code it set to 250, but you can replace how you prefer

$(".someDiv").scroll(function() {
var th = this;
var scrollDelay = 250;
clearTimeout($.data(this, 'scrollTimer'));

$.data(this, 'scrollTimer', setTimeout(function() {
    // do something
    if (th.scrollTop === 0) {
            //this works only when scrollTop changes from 0+n value.
        console.log(555);
        }
}, scrollDelay));
});

see example

Upvotes: 0

Ashish Detroja
Ashish Detroja

Reputation: 1082

Please try below code:
For Bottom : 

jQuery(
  function($)
  {
    $('#nbody').bind('scroll', function()
                              {
                                if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
                                {
                                  alert('end reached');
                                }
                              })
  }
);
#nbody{width:200px;height:150px;overflow:auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nbody">
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>

</div>

For Top: 

var el = $('.test');



el.on('scroll', function(){
    
    if(el.scrollTop() == 0){alert("hit the top")}
    
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="height:100px;width:70px;overflow:auto">
    sadfsadf
    saf
    sadf
    saf
    s
    af
    saf
    saf
    sadf
    sadfsafsafsaf
    sadfsaf
    
    sadfsafsadf
    
    sadfsaf
    sa
    dfsa
    fsadf
</div>

Upvotes: 0

Niek Janssen
Niek Janssen

Reputation: 56

You can consider a few options:

  1. Use the onWheel callback (https://www.w3schools.com/jsref/event_onwheel.asp). This does not work on Safari and IE <= 8
  2. Look for a third party library that emulates this
  3. Use a hidden div and some CSS to catch all scrolling there. It will take you some tinkering. You can use javascript to set the scrollTop of the div to something > 0.

Upvotes: 1

Related Questions