1、監聽整個demo的滾動

<script>
  $(function(){
    $(window).scroll(function() {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();

      if(scrollTop == 0){
        alert('觸頂');
      }

      if(scrollTop + windowHeight == scrollHeight  ){
        alert('下拉到底了');
      }
    })
  })
</script>
 

2、有可能只是一個小div，設定了超出後滾動的屬性 overflow: scroll;
先上程式碼：

<script>
  $('要監聽的物件').on('scroll',function(){
        var scrollHeight = this.scrollHeight;
        var scrollTop = this.scrollTop;
        var clientHeight = this.clientHeight;

        // 注意：下面這種寫法是無效的：
        // var clientHeight = $('要監聽的物件').clientHeight;

        
      if(scrollTop == 0){
        alert('觸頂');
      }

      if(scrollTop + clientHeight == scrollHeight){
        alert('下拉到底了');
      }
    })
</script>
 

監聽div的滾動的時候會有一些問題
1、需要用物件.on事件或者物件.scroll事件來監聽
2、在事件的內部，需要用this來獲取滾動的位置，而不能再次使用jq的物件