JAVASCRIPT 在用户 SCROLL DOWN 和 SCROLL TOP 时执行函数答案

【问题标题】：JAVASCRIPT execute function when user SCROLL DOWN and SCROLL TOPJAVASCRIPT 在用户 SCROLL DOWN 和 SCROLL TOP 时执行函数
【发布时间】：2020-01-05 18:53:03
【问题描述】：

该函数从db中加载数据，当用户向下滚动页面和向上滚动时如何执行

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

   <script type="text/javascript">
        $(document).ready(function(){

            //var to auto-increment 
                var flag = 0;

                $.ajax({
                    type: "GET",
                    url: "db_load.php",
                    data:{
                        'offset': 0,
                        'limit': 3
                    },
                    success: function(data){
                        $('body').append(data);
                        flag += 3;
                    }
                });
                    }); //end document.ready function
                   </script>

我需要一种简单的方法来检测用户何时向下滚动和向上滚动，而不是调用上面的函数

【问题讨论】：

标签： javascript jquery html scroll infinite-scroll

【解决方案1】：

您可以为处理每次滚动的窗口设置一个 eventListener。这样您就可以确定滚动条何时位于整个文档的顶部或底部。

看一个例子：

let limitBottom = document.documentElement.offsetHeight - window.innerHeight;
window.addEventListener("scroll",function(){
  if(document.documentElement.scrollTop == 0){
    console.log("Window scroll is at the top")
  }
  if(document.documentElement.scrollTop == limitBottom){
    console.log("Window scroll is at the bottom")
  }
})

body {
  margin: 0;
  padding: 0;
}

.x {
  background: black;
  width: 100%;
  height: 200vh;
  color: white;
}

&lt;div class="x"&gt;SCROLL HERE&lt;/div&gt;

【讨论】：

是的，$(window).on("scroll",function(){/*YOUR CODE*/}) 应该可以工作，因为 eventListener 是唯一可以定义是否使用 jQuery 的东西。但这就是you might not need jquery 的用武之地。
所以无论如何我都需要 eventListener 对吧？因为我的代码有 jquery 部分，它也应该以你没有的方式工作？它会是js里面的jquery吗？它也应该可以正常工作吗？
没错，不管是不是 jQuery，你都需要 eventListener 来处理这种动作。