JAVASCRIPT 当用户向下滚动和向上滚动时执行函数

Question

这个函数从数据库加载数据，当用户向下滚动页面和滚动顶部时如何执行它

<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>

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

Answer 1

您可以将事件监听器设置为 window 来处理每次滚动。这样您就可以确定滚动条何时位于整个文档的顶部或底部。

看一个例子：

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;
}

<div class="x">SCROLL HERE</div>

JAVASCRIPT 当用户向下滚动和向上滚动时执行函数

JAVASCRIPT execute function when user SCROLL DOWN and SCROLL TOP

html

javascript

jquery

scroll

infinite-scroll