简体   繁体   English

jQuery滚动到BOTTOM以加载新内容在Scrolling TOP上以相反的方式工作(即)

[英]Jquery Scroll to BOTTOM to load new content is working in opposite way (i.e) on Scrolling TOP

I am working on a website, which has scroll to BOTTOM to load AJAX content. 我在一个网站上工作,该网站已滚动到BOTTOM以加载AJAX内容。

I use this Jquery Scroll function: 我使用此Jquery Scroll函数:

$(window).scroll(function() { 

  if($(window).scrollTop() + $(window).height() == $(document).height())  
    {

      alert("ScrollTop + Window Height = "+$(window).scrollTop()+ " + " +
      $(window).height()+ " == Document Height = "+$(document).height());

      // This get's alerted only when i reach TOP
    }

  });

But this works only if i reach TOP 但这仅在我达到TOP时有效

Do anyone had this problem before ? 有人遇到过这个问题吗?

You can try following code for your issue. 您可以尝试按照以下代码解决问题。

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

And for more information visit this Link 欲了解更多信息,请访问此链接

First you need to understand defference between window and document for example 800wX600h ($(window).scrollTop() + $(window).height() == $(document).height() 首先,您需要了解窗口和文档之间的差异,例如800wX600h($(window).scrollTop()+ $(window).height()== $(document).height()

0+600=600 0 + 600 = 600

So it should be 0+600 > 600 所以应该是0 + 600> 600

replace it with ($(window).scrollTop() + $(window).height() == $(document).height() 将其替换为($(window).scrollTop()+ $(window).height()== $(document).height()

I found a solution for this issue, 我找到了解决此问题的方法,

Its My Mistake that, i didn't include doc type in my html code. 我的错误是,我的html代码中没有包含文档类型。

<!DOCTYPE html>

And that's why the scroll worked in reverse order. 这就是滚动以相反顺序工作的原因。 After including the doctype at the 1st line of the code, it's working good as expected (ie) Scrolling to the bottom of page to load more AJAX content or call function(). 在代码的第一行包含doctype之后,它可以按预期工作(即)滚动到页面底部以加载更多AJAX内容或调用function()。

So when ever you write a code start with < !DOCTYPE html > 因此,无论何时您编写的代码都以<!DOCTYPE html>开头

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM