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

Posted 2023-05-07

【中文标题】JAVASCRIPT 在用户 SCROLL DOWN 和 SCROLL TOP 时执行函数

【英文标题】：JAVASCRIPT execute function when user SCROLL DOWN and 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>

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

【参考方案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;

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

【讨论】：

是的，$(window).on("scroll",function()/*YOUR CODE*/) 应该可以工作，因为 eventListener 是唯一可以定义是否使用 jQuery 的东西。但这就是you might not need jquery 的用武之地。

所以无论如何我都需要 eventListener 对吧？因为我的代码有 jquery 部分，它也应该以你没有的方式工作？它会是js里面的jquery吗？它也应该可以正常工作吗？

没错，不管是不是 jQuery，你都需要 eventListener 来处理这种动作。