Question

我有一个div，其中包含一些overflow-y: scroll属性的元素。现在，我已经为scroll事件编写了jQuery代码。滚动内容时，它工作正常。但是当scrollTop 0 时，它不起作用，因为scroll事件仅在您真正滚动时才有效。顶部为0时滚动停止。

那么在scrollTop设置为0后，有没有办法检测用户是否仍在滚动？

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

Answer 1

您可以考虑以下几个选项：

使用onWheel回调（https://www.w3schools.com/jsref/event_onwheel.asp）。这在Safari和IE＆lt; = 8
寻找模仿此
使用隐藏的div和一些CSS来捕捉所有滚动。它会带你一些修补。您可以使用javascript将div的scrollTop设置为＆gt; 0.

Answer 2

请尝试以下代码：
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>

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>

Answer 3

您可以通过其他方式来实现，例如获取用户体验的滚动延迟实际上在我的代码中它设置为250，但你可以替换你喜欢的方式

$(".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

当scrollTop为0时，如何检测用户是否滚动div内容？

3 个答案: