JQ监听页面滚动 下拉到底事件

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的对象