Question

在页面上滚动达到页面末尾500px以上时尝试获取警报。（跳过页脚以自动加载新内容。）

使用offsetHeight进行了很多尝试，但无法正常工作。

这是我使用的功能，但如果我理解正确，则需要将其调整为-500。

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
    alert('more please...');
}

感谢您的帮助！

Answer 1

您需要一个小公式来查看是否已滚动到保存区域：

package.json

设置保存区域的高度：

(SaveHeight + ScrollTop) > (ContentHeight - WindowHeight)

使用这些选择器获取值：

const SaveHeight =  500;

将它们放在一起：

let ScrollTop =     $(document).scrollTop();
let ContentHeight = $("#content").height(); // or $(document).height()
let WindowHeight =  $(window).height();

// Config
   const SaveHeight =  500;
   
// Set indicator
   $("#indicator").height(SaveHeight);
   
// Scroll event
   $(document).on("scroll", function() {
      
   // Get values
      ScrollTop =     Math.round($(document).scrollTop());
      ContentHeight = Math.round($("#content").height());
      WindowHeight =  Math.round($(window).height());
      
   // Show live values
      scrollis = SaveHeight + ScrollTop;
      scrollwas = ContentHeight - WindowHeight;
      calculation = " ("+SaveHeight+" + "+ScrollTop+") > ("+ContentHeight+" - "+WindowHeight+")<br>"+scrollis+" > "+scrollwas+"";
      $("#calculation").html(calculation);
      
   // React on values
      if (SaveHeight + ScrollTop > ContentHeight - WindowHeight) {
         $("#content").css("background", "#ffeeee");
      }
      else {
         $("#content").css("background", "#ffffff");
      }
      
   });

#content { height: 2000px; position: relative; }
#indicator { height: 100vh; background: red; width: 10px; position: absolute; bottom: 0px; }
#calculation { position: fixed; top: 10px; right: 10px; text-align: center; }

一些注意事项：

大多数代码片段只是为了可视化正在发生的事情...
推荐使用jQuery .on()

希望这会有所帮助：）

Answer 2

我想这就是您要寻找的

$(window).scroll(function() {
    if($(document).scrollTop() == $(document).height() - 500) {
        alert('more please...');
    }
}

在窗口滚动功能上设置高度边距

2 个答案: