我可以使用scroll（）方法触发Load（）函数吗？

Question

我有一个脚本，当我点击按钮时加载一个php文件。

$(document).ready(function (){
      $('#loaded').on('click', function(){
      $("#phpContent").load('beach.php');
});

这个工作很好，而load（）函数给我的文件，问题是当我将onClick函数更改为Scroll函数时，该行

  

$（＆＃34;＃phpContent＆＃34）的负载。（＆＃39; beach.php＆＃39）;

不再打电话或不工作

$(document).ready(function (){
     $('body').scroll(function(){
     $("#phpContent").load('beach.php');
});

所以Load（）函数不能用该方法调用？或者我在代码中做错了什么？

Answer 1

以下代码甚至适用于此SO页面：

$(document).ready(function (){
    $( window ).scroll(function() {
        $("#phpContent").load('beach.php');
    });
});

Answer 2

全局容器的scroll事件在window上触发，而不是在body元素本身上触发，因此您需要在正确的对象上侦听它。

接下来，从以下代码段中可以看出，此调用将多次触发。

＆＃13;

＆＃13;

const url = 'https://baconipsum.com/api/?type=all-meat&format=html';
$(window).scroll(event => $("#target").load(url));

＆＃13;

body { height: 200vh; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

＆＃13;

＆＃13;

＆＃13;

假设您只想在第一次滚动页面时触发此操作，您可以使用jQuery.one，这只会触发一次。

＆＃13;

＆＃13;

const url = 'https://baconipsum.com/api/?type=all-meat&format=html';
$(window).one('scroll', event => $("#target").load(url));

＆＃13;

body { height: 200vh; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在两个示例中，您都缺少一个右大括号。就滚动部分而言，我很确定滚动时会发生多次触发。您可能只想在指定的滚动位置触发。