Question

我正在使用PHP和MySQL输出结果集，每个结果都包含在DIV中。一旦用户滚动到浏览器窗口的底部，JavaScript函数就会触发操作。

$(window).scroll(function(){
  if ($(window).scrollTop() == $(document).height() - $(window).height()){
    trigger_funtion();
  }
});

PHP结果的每个项目（类“.item”）都放在包含所有项目的通用包装器DIV（类“.results”）中。

如何在上面更改此功能，以便用户在从结果集创建的最后一个DIV“滚动”或“到达”时触发操作，而不是在他点击浏览器底部时窗口？

我尝试了以下内容，但它不起作用

$(window).scroll(function(){
  if  ($(window).scrollTop() == $(".results .item:last")){
    trigger_funtion();
  }
});

Answer 1

您需要使用.position().top我建议使用＆gt; =而不是==因为您不能依赖相等的数字

if  ($(window).scrollTop() >= $(".results .item:last").position().top)

或

var winHeight = $(window).height(); // viewport 
if  ($(window).scrollTop()+winHeight >= $(".results .item:last").position().top)

以下是最后一项命中顶部

的代码

Live Demo

$(function() {
  var $item = $(".results .item:last"); // cache element  
  $(window).scroll(function(){
    var itemTop = $item.position().top-10;  // subtract some pixels from the  item 
    var winScrollTop =$(window).scrollTop();
    window.console && console.log(winScrollTop,itemTop); // remove when happy
    if  (winScrollTop>=itemTop) { 
      window.console && console.log("reached!",winScrollTop,itemTop); remove when happy
      $item.html("REACHED!");
    }
  });
});

以及何时触及底部

Live Demo

$(function() {
  var $item = $(".results .item:last"); // cache element  
  $(window).scroll(function(){
    var itemTop = $item.position().top-10;  // subtract some pixels from the  item 
    var winScrollTop =$(window).scrollTop();
    var winHeight = $(window).height();  
    window.console && console.log(winScrollTop,itemTop); // remove when happy
    if  (winScrollTop+winHeight>=itemTop) { 
      window.console && console.log("reached!",winScrollTop,itemTop); // remove when happy
      $item.html("REACHED!");
    }
  });
});

在Javascript中到达目标div时触发操作

1 个答案: