blocks|key|1902691|text|在window上使用.scroll()事件，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1902692|$(window).scroll(function()+{
+++if($(window).scrollTop()+%2B+$(window).height()+==+$(document).height())+{
+++++++alert("bottom!");
+++}
});|code-block|syntax|javascript|1902693|You+can+test+it+here，它获取窗口的顶部滚动，即它向下滚动的程度，添加可见窗口的高度，并检查该高度是否等于整体内容的高度(document)。如果你想检查用户是否接近底部，它看起来就像这样：|1902694|$(window).scroll(function()+{
+++if($(window).scrollTop()+%2B+$(window).height()+>+$(document).height()+-+100)+{
+++++++alert("near+bottom!");
+++}
});|1902695|You+can+test+that+version+here，只需将100调整为从底部开始要触发的任何像素即可。|1902696|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/scroll/|1|http://jsfiddle.net/nick_craver/gWD66/|2|http://jsfiddle.net/nick_craver/gWD66/1/^0|1|6|A|9|A|9|0|0|0|1Y|8|0|K|1|0|0|Y|3|0|U|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|M|3|N|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|Q|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]]]

<p>Use the <a href="http://api.jquery.com/scroll/" rel="noreferrer"><code>.scroll()</code></a> event on <code>window</code>, like this:</p>

<pre><code>$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});
</code></pre>

<p><a href="http://jsfiddle.net/nick_craver/gWD66/" rel="noreferrer">You can test it here</a>, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (<code>document</code>).  If you wanted to instead check if the user is <em>near</em> the bottom, it'd look something like this:</p>

<pre><code>$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() &gt; $(document).height() - 100) {
       alert("near bottom!");
   }
});
</code></pre>

<p><a href="http://jsfiddle.net/nick_craver/gWD66/1/" rel="noreferrer">You can test that version here</a>, just adjust that <code>100</code> to whatever pixel from the bottom you want to trigger on.</p>


blocks|key|4682510|text|Nick+Craver的回答很好，除了$(document).height()的值因浏览器不同而不同的问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4682511|要使其在所有浏览器上运行，请使用James+Padolsey中的此函数|4682512|function+getDocHeight()+{
++++var+D+=+document;
++++return+Math.max(
++++++++D.body.scrollHeight,+D.documentElement.scrollHeight,
++++++++D.body.offsetHeight,+D.documentElement.offsetHeight,
++++++++D.body.clientHeight,+D.documentElement.clientHeight
++++);
}|code-block|syntax|javascript|4682513|来代替$(document).height()，所以最终的代码是：|4682514|$(window).scroll(function()+{
+++++++if($(window).scrollTop()+%2B+$(window).height()+==+getDocHeight())+{
+++++++++++alert("bottom!");
+++++++}
+++});|4682515|entityMap|0|LINK|mutability|MUTABLE|url|http://james.padolsey.com/javascript/get-document-height-cross-browser/^0|J|K|0|G|E|0|0|0|3|K|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>Nick Craver's answer works fine, spare the issue that the value of <code>$(document).height()</code> varies by browser.</p>

<p>To make it work on all browsers, use this function from <a href="http://james.padolsey.com/javascript/get-document-height-cross-browser/">James Padolsey</a>:</p>

<pre><code>function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}
</code></pre>

<p>in place of <code>$(document).height()</code>, so that the final code is:</p>

<pre><code>$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });
</code></pre>


blocks|key|1155254|text|对于那些使用Nick的解决方案并获得重复的警报/事件触发的人，您可以在警报示例上添加一行代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1155255|$(window).scroll(function()+{
+++if($(window).scrollTop()+%2B+$(window).height()+>+$(document).height()+-+100)+{
+++++++$(window).unbind('scroll');
+++++++alert("near+bottom!");
+++}
});|code-block|syntax|javascript|1155256|这意味着只有当你第一次在文档底部100px的范围内时，代码才会触发。如果你向上滚动然后向下滚动，它不会重复，这可能有用，也可能没有用，这取决于你使用Nick的代码做什么。|1155257|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>For those using Nick's solution and getting repeated alerts / events firing, you could add a line of code above the alert example:</p>

<pre><code>$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() &gt; $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});
</code></pre>

<p>This means that the code will only fire the first time you're within 100px of the bottom of the document. It won't repeat if you scroll back up and then back down, which may or may not be useful depending on what you're using Nick's code for.</p>


blocks|key|1155263|text|根据Nick+Craver的出色回答，您可以限制scroll事件，使其不会频繁触发，从而提高浏览器性能|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1155264|var+_throttleTimer+=+null;
var+_throttleDelay+=+100;
var+$window+=+$(window);
var+$document+=+$(document);

$document.ready(function+()+{

++++$window
++++++++.off('scroll',+ScrollHandler)
++++++++.on('scroll',+ScrollHandler);

});

function+ScrollHandler(e)+{
++++//throttle+event:
++++clearTimeout(_throttleTimer);
++++_throttleTimer+=+setTimeout(function+()+{
++++++++console.log('scroll');

++++++++//do+work
++++++++if+($window.scrollTop()+%2B+$window.height()+>+$document.height()+-+100)+{
++++++++++++alert("near+bottom!");
++++++++}

++++},+_throttleDelay);
}|code-block|syntax|javascript|1155265|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Further to the excellent accepted answer from Nick Craver, you can throttle the scroll event so that it is not fired so frequently thus <strong>increasing browser performance</strong>:</p>

<pre><code>var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() &gt; $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}
</code></pre>


blocks|key|1898045|text|尼克·克雷弗的答案需要稍微修改一下，才能在iOS+6+Safari+Mobile上运行，答案应该是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1898046|$(window).scroll(function()+{
+++if($(window).scrollTop()+%2B+window.innerHeight+==+$(document).height())+{
+++++++alert("bottom!");
+++}
});|code-block|syntax|javascript|1898047|应该将$(window).height()更改为window.innerHeight，因为当地址栏隐藏时，窗口的高度会增加60px，但使用$(window).height()不会反映这种变化，而使用window.innerHeight则会。|offset|length|style|BOLD|CODE|1898048|备注：window.innerHeight属性还包括水平滚动条的高度(如果它被呈现的话)，这与$(window).height()不包括水平滚动条的高度不同。这在Mobile+Safari中不是问题，但可能会在其他浏览器或Mobile+Safari的未来版本中导致意外的行为。对于大多数常见用例，将==更改为>=可以修复此问题。|1898049|阅读有关window.innerHeight属性here的更多信息|1898050|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/window.innerHeight^0|0|0|3|I|O|I|1X|I|2R|I|0|0|2|3|I|1B|I|45|2|4A|2|0|4|I|O|4|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@$I|12|J|13|K|L]|$I|14|J|15|K|L]|$I|16|J|17|K|M]|$I|18|J|19|K|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1A|8|@$I|1B|J|1C|K|L]|$I|1D|J|1E|K|M]|$I|1F|J|1G|K|M]|$I|1H|J|1I|K|M]|$I|1J|J|1K|K|M]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1L|8|@$I|1M|J|1N|K|M]]|9|@$I|1O|J|1P|1|1Q]]|A|$]]|$1|R|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>Nick Craver's answer needs to be slightly modified to work on iOS 6 Safari Mobile and should be:</p>

<pre><code>$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});
</code></pre>

<p>Changing <strong><em>$(window).height()</em></strong> to <strong><em>window.innerHeight</em></strong> should be done because when the address bar is hidden an additional 60px are added to the window's height but using <code>$(window).height()</code> does <strong>not</strong> reflect this change, while using <code>window.innerHeight</code> does.</p>

<p><strong>Note</strong>: The <code>window.innerHeight</code> property also includes the horizontal scrollbar's height (if it is rendered), unlike <code>$(window).height()</code> which will not include the horizontal scrollbar's height. This is not a problem in Mobile Safari, but could cause unexpected behavior in other browsers or future versions of Mobile Safari. Changing <code>==</code> to <code>&gt;=</code> could fix this for most common use cases.</p>

<p>Read more about the <code>window.innerHeight</code> property <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.innerHeight" rel="noreferrer">here</a></p>


blocks|key|3272595|text|这里有一段代码可以帮助你调试你的代码，我测试了上面的答案，发现它们有buggy。我已经测试了以下浏览器，IE，火狐，IPad(Safari)。我没有安装任何其他的来测试...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3272596|<script+type="text/javascript">
+++$(function()+{
++++++$(window).scroll(function+()+{
+++++++++var+docElement+=+$(document)[0].documentElement;
+++++++++var+winElement+=+$(window)[0];

+++++++++if+((docElement.scrollHeight+-+winElement.innerHeight)+==+winElement.pageYOffset)+{
++++++++++++alert('bottom');
+++++++++}
++++++});
+++});
</script>|code-block|syntax|javascript|3272597|也许有一种更简单的解决方案，但我停留在IT+WORKED这一点上|offset|length|style|BOLD|3272598|如果您仍然在使用某些恶意浏览器时遇到问题，这里有一些代码可以帮助您调试：|3272599|<script+type="text/javascript">
+++$(function()+{
++++++$(window).scroll(function+()+{
+++++++++var+docElement+=+$(document)[0].documentElement;
+++++++++var+details+=+"";
+++++++++details+%2B=+'<b>Document</b><br+/>';
+++++++++details+%2B=+'clientHeight:'+%2B+docElement.clientHeight+%2B+'<br+/>';
+++++++++details+%2B=+'clientTop:'+%2B+docElement.clientTop+%2B+'<br+/>';
+++++++++details+%2B=+'offsetHeight:'+%2B+docElement.offsetHeight+%2B+'<br+/>';
+++++++++details+%2B=+'offsetParent:'+%2B+(docElement.offsetParent+==+null)+%2B+'<br+/>';
+++++++++details+%2B=+'scrollHeight:'+%2B+docElement.scrollHeight+%2B+'<br+/>';
+++++++++details+%2B=+'scrollTop:'+%2B+docElement.scrollTop+%2B+'<br+/>';

+++++++++var+winElement+=+$(window)[0];
+++++++++details+%2B=+'<b>Window</b><br+/>';
+++++++++details+%2B=+'innerHeight:'+%2B+winElement.innerHeight+%2B+'<br+/>';
+++++++++details+%2B=+'outerHeight:'+%2B+winElement.outerHeight+%2B+'<br+/>';
+++++++++details+%2B=+'pageYOffset:'+%2B+winElement.pageYOffset+%2B+'<br+/>';
+++++++++details+%2B=+'screenTop:'+%2B+winElement.screenTop+%2B+'<br+/>';
+++++++++details+%2B=+'screenY:'+%2B+winElement.screenY+%2B+'<br+/>';
+++++++++details+%2B=+'scrollY:'+%2B+winElement.scrollY+%2B+'<br+/>';

+++++++++details+%2B=+'<b>End+of+page</b><br+/>';
+++++++++details+%2B=+'Test:'+%2B+(docElement.scrollHeight+-+winElement.innerHeight)+%2B+'='+%2B+winElement.pageYOffset+%2B+'<br+/>';
+++++++++details+%2B=+'End+of+Page?+';
+++++++++if+((docElement.scrollHeight+-+winElement.innerHeight)+==+winElement.pageYOffset)+{
+++++++++++++details+%2B=+'YES';
+++++++++}+else+{
+++++++++++++details+%2B=+'NO';
+++++++++}

+++++++++$('#test').html(details);
++++++});
+++});
</script>
<div+id="test"+style="position:+fixed;+left:0;+top:+0;+z-index:+9999;+background-color:+#FFFFFF;">|3272600|我希望这能节省一些人的时间。|3272601|entityMap^0|0|0|J|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Here is a piece of code that will help you debug your code, I tested the above answers and found them to be buggy.  I have test the followings on Chrome, IE, Firefox, IPad(Safari). I don't have any others installed to test...</p>

<pre><code>&lt;script type="text/javascript"&gt;
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
&lt;/script&gt;
</code></pre>

<p>There may be a simpler solution, but I stopped at the point at which <strong>IT WORKED</strong></p>

<p>If you are still having problems with some rogue browser, here is some code to help you debug:</p>

<pre><code>&lt;script type="text/javascript"&gt;
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '&lt;b&gt;Document&lt;/b&gt;&lt;br /&gt;';
         details += 'clientHeight:' + docElement.clientHeight + '&lt;br /&gt;';
         details += 'clientTop:' + docElement.clientTop + '&lt;br /&gt;';
         details += 'offsetHeight:' + docElement.offsetHeight + '&lt;br /&gt;';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '&lt;br /&gt;';
         details += 'scrollHeight:' + docElement.scrollHeight + '&lt;br /&gt;';
         details += 'scrollTop:' + docElement.scrollTop + '&lt;br /&gt;';

         var winElement = $(window)[0];
         details += '&lt;b&gt;Window&lt;/b&gt;&lt;br /&gt;';
         details += 'innerHeight:' + winElement.innerHeight + '&lt;br /&gt;';
         details += 'outerHeight:' + winElement.outerHeight + '&lt;br /&gt;';
         details += 'pageYOffset:' + winElement.pageYOffset + '&lt;br /&gt;';
         details += 'screenTop:' + winElement.screenTop + '&lt;br /&gt;';
         details += 'screenY:' + winElement.screenY + '&lt;br /&gt;';
         details += 'scrollY:' + winElement.scrollY + '&lt;br /&gt;';

         details += '&lt;b&gt;End of page&lt;/b&gt;&lt;br /&gt;';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '&lt;br /&gt;';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
&lt;/script&gt;
&lt;div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;"&gt;
</code></pre>

<p>I hope this will save someone some time.</p>


blocks|key|3272623|text|让我展示一下不使用JQuery的方法。简单的JS函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3272624|function+isVisible(elem)+{
++var+coords+=+elem.getBoundingClientRect();
++var+topVisible+=+coords.top+>+0+&&+coords.top+<+0;
++var+bottomVisible+=+coords.bottom+<+shift+&&+coords.bottom+>+0;
++return+topVisible+%7C%7C+bottomVisible;
}|code-block|syntax|javascript|3272625|下面是一个简短的使用示例：|3272626|var+img+=+document.getElementById("pic1");
++++if+(isVisible(img))+{+img.style.opacity+=+"1.00";++}|3272627|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Let me show approch without JQuery. Simple JS function: </p>

<pre><code>function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top &gt; 0 &amp;&amp; coords.top &lt; 0;
  var bottomVisible = coords.bottom &lt; shift &amp;&amp; coords.bottom &gt; 0;
  return topVisible || bottomVisible;
}
</code></pre>

<p>Short example how to use it:</p>

<pre><code>var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }
</code></pre>


blocks|key|1898090|text|下面是一个使用ES+6和debounce的普通JavaScript解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1898091|document.addEventListener('scroll',+debounce(()+=>+{
++if(document.documentElement.scrollHeight+===+window.pageYOffset+%2B+window.innerHeight)+{
++++//+Do+something
++}
},+500))

function+debounce(e,t=300){let+u;return(...i)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,i)},t)}}|code-block|syntax|javascript|1898092|演示：+https://jsbin.com/jicikaruta/1/edit?js,output|BOLD|1898093|参考：|1898094|1898095|scrollHeight|unordered-list-item|1898096|pageYOffset|1898097|innerHeight|1898098|Debounce|1898099|1898100|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbin.com/jicikaruta/1/edit?js,output|1|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight|2|https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset|3|https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight|4|https://www.freecodecamp.org/news/javascript-debounce-example^0|C|8|0|0|0|3|4|19|0|0|0|3|0|0|0|C|1|0|0|B|2|0|0|B|3|0|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1K|8|@$9|1L|A|1M|B|M]]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|N|3|O|5|6|7|1Q|8|@$9|1R|A|1S|B|M]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1U|8|@]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|T|3|U|5|S|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|V|3|W|5|S|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|X|3|Y|5|S|7|26|8|@]|D|@$9|27|A|28|1|29]]|E|$]]|$1|Z|3|-4|5|6|7|2A|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]|1A|$5|13|14|15|E|$16|1B]]|1C|$5|13|14|15|E|$16|1D]]|1E|$5|13|14|15|E|$16|1F]]]]

<p>Here is a vanilla JavaScript solution that uses ES 6 and <code>debounce</code>:</p>
<pre><code>document.addEventListener('scroll', debounce(() =&gt; {
  if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
    // Do something
  }
}, 500))

function debounce(e,t=300){let u;return(...i)=&gt;{clearTimeout(u),u=setTimeout(()=&gt;{e.apply(this,i)},t)}}
</code></pre>
<p><strong>Demo:</strong> <a href="https://jsbin.com/jicikaruta/1/edit?js,output" rel="nofollow noreferrer">https://jsbin.com/jicikaruta/1/edit?js,output</a></p>
<p><strong>References:</strong></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight" rel="nofollow noreferrer">scrollHeight</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset" rel="nofollow noreferrer">pageYOffset</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight" rel="nofollow noreferrer">innerHeight</a></li>
<li><a href="https://www.freecodecamp.org/news/javascript-debounce-example" rel="nofollow noreferrer">Debounce</a></li>
</ul>


blocks|key|1902870|text|以下是我的两点意见：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1902871|$('#container_element').scroll(+function(){
++++++++console.log($(this).scrollTop()%2B'+%2B+'%2B+$(this).height()%2B'+=+'%2B+($(this).scrollTop()+%2B+$(this).height())+++%2B'+_+'%2B+$(this)[0].scrollHeight++);
++++++++if($(this).scrollTop()+%2B+$(this).height()+==+$(this)[0].scrollHeight){
++++++++++++console.log('bottom+found');
++++++++}
++++});|code-block|syntax|javascript|1902872|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is my two cents:</p>

<pre><code>$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });
</code></pre>


blocks|key|1155381|text|我不确定为什么这篇文章还没有发布，但根据the+documentation+from+MDN的说法，最简单的方法是使用原生javascript属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1155382|element.scrollHeight+-+element.scrollTop+===+element.clientHeight|code-block|syntax|javascript|1155383|当你在任何可滚动元素的底部时，返回true。所以只需使用javascript：|1155384|element.addEventListener('scroll',+function(event)
{
++++var+element+=+event.target;
++++if+(element.scrollHeight+-+element.scrollTop+===+element.clientHeight)
++++{
++++++++console.log('scrolled');
++++}
});|1155385|scrollHeight在浏览器中有广泛的支持，更准确地说，从ie8开始，而clientHeight和scrollTop都受到所有人的支持。甚至是ie6。这应该是跨浏览器安全的。|style|CODE|1155386|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight^0|K|Q|0|0|0|0|0|0|C|12|C|1F|9|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@$A|16|B|17|O|P]|$A|18|B|19|O|P]|$A|1A|B|1B|O|P]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>I'm not exactly sure why this has not been posted yet, but as per <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight">the documentation from MDN</a>, the simplest way is by using native javascript properties:</p>

<pre><code>element.scrollHeight - element.scrollTop === element.clientHeight
</code></pre>

<p>Returns true when you're at the bottom of any scrollable element. So simply using javascript:</p>

<pre><code>element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});
</code></pre>

<p><code>scrollHeight</code> have wide support in browsers, from ie 8 to be more precise, while <code>clientHeight</code> and <code>scrollTop</code> are both supported by everyone. Even ie 6. This should be cross browser safe.</p>


blocks|key|1155397|text|请查看this+answer|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1155398|+window.onscroll+=+function(ev)+{
++++if+((window.innerHeight+%2B+window.scrollY)+>=+document.body.offsetHeight)+{
+++++++console.log("bottom");
++++}
};|code-block|syntax|javascript|1155399|您可以执行footerHeight+-+document.body.offsetHeight来查看您是否在页脚附近或到达页脚|style|CODE|1155400|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom#9439807^0|3|B|0|0|0|5|15|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Please check <a href="https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom#9439807">this answer</a></p>

<pre><code> window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) &gt;= document.body.offsetHeight) {
       console.log("bottom");
    }
};
</code></pre>

<p>You can do <code>footerHeight - document.body.offsetHeight</code> to see if you are near the footer or reached the footer</p>


blocks|key|1153111|text|我使用了@ddanone+answear并添加了Ajax+call。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1153112|$('#mydiv').on('scroll',+function(){
++function+infiniScroll(this);
});

function+infiniScroll(mydiv){
console.log($(mydiv).scrollTop()%2B'+%2B+'%2B+$(mydiv).height()%2B'+=+'%2B+($(mydiv).scrollTop()+%2B+$(mydiv).height())+++%2B'+_+'%2B+$(mydiv)[0].scrollHeight++);

if($(mydiv).scrollTop()+%2B+$(mydiv).height()+==+$(mydiv)[0].scrollHeight){
++++console.log('bottom+found');
++++if(!$.active){+//if+there+is+no+ajax+call+active+(+last+ajax+call+waiting+for+results+)+do+again+my+ajax+call
++++++++myAjaxCall();
++++}
}|code-block|syntax|javascript|1153113|}|1153114|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I used @ddanone answear and added Ajax call. </p>

<pre><code>$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}
</code></pre>

<p>}</p>


blocks|key|3272882|text|下面是一个相当简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3272883|const+didScrollToBottom+=+elm.scrollTop+%2B+elm.clientHeight+==+elm.scrollHeight|offset|length|style|CODE|3272884|示例|BOLD|3272885|elm.onscroll+=+function()+{
++++if(elm.scrollTop+%2B+elm.clientHeight+==+elm.scrollHeight)+{
++++++++//+User+has+scrolled+to+the+bottom+of+the+element
++++}
}|code-block|syntax|javascript|3272886|其中，elm是从例如document.getElementById检索到的元素。|3272887|entityMap^0|0|0|26|0|0|2|0|0|3|3|A|N|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@$D|Y|E|Z|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|10|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|11|8|@$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|S|$]]

<p>Here's a fairly simple approach</p>

<p><code>const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight</code></p>

<p><strong>Example</strong></p>

<pre><code>elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}
</code></pre>

<p>Where <code>elm</code> is an element retrieved from i.e <code>document.getElementById</code>.</p>


blocks|key|1902970|text|var+elemScrolPosition+=+elem.scrollHeight+-+elem.scrollTop+-+elem.clientHeight;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1902971|它计算滚动条到元素底部的距离。如果滚动条已到达底部，则等于0。|unstyled|1902972|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
</code></pre>

<p>It calculates distance scroll bar to bottom of element.
Equal 0, if scroll bar has reached bottom. </p>


blocks|key|1155463|text|为了停止对尼克回答的反复提醒|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1155464|ScrollActivate();

function+ScrollActivate()+{
++++$(window).on("scroll",+function+()+{
++++++++if+($(window).scrollTop()+%2B+$(window).height()+>+$(document).height()+-+100)+{
++++++++++++$(window).off("scroll");
++++++++++++alert("near+bottom!");
++++++++}
++++});
}|code-block|syntax|javascript|1155465|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To stop repeated alert of Nick's answer</p>

<pre><code>ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() &gt; $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}
</code></pre>


blocks|key|1898219|text|Nick回答的很好，但你会有在滚动时自动重复的功能，或者如果用户缩放了窗口，它将根本不起作用。我想出了一个简单的解决方法，只需math.round第一个高度，它的工作就像假设的那样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1898220|++++if+(Math.round($(window).scrollTop())+%2B+$(window).innerHeight()+==+$(document).height()){
++++loadPagination();
++++$(".go-up").css("display","block").show("slow");
}|code-block|syntax|javascript|1898221|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Nick answers its fine but you will have functions which repeats itsself while scrolling or will not work at all if user has the window zoomed. I came up with an easy fix just math.round the first height and it works just as assumed.</p>

<pre><code>    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}
</code></pre>


blocks|key|1153223|text|所有这些解决方案在火狐和Chrome上都不适用，所以我使用来自Miles+O'Keefe和meder+omuraliev的自定义函数，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1153224|function+getDocHeight()
{
++++var+D+=+document;
++++return+Math.max(
++++++++D.body.scrollHeight,+D.documentElement.scrollHeight,
++++++++D.body.offsetHeight,+D.documentElement.offsetHeight,
++++++++D.body.clientHeight,+D.documentElement.clientHeight
++++);
}

function+getWindowSize()
{
++var+myWidth+=+0,+myHeight+=+0;
++if(+typeof(+window.innerWidth+)+==+'number'+)+{
++++//Non-IE
++++myWidth+=+window.innerWidth;
++++myHeight+=+window.innerHeight;
++}+else+if(+document.documentElement+&&+(+document.documentElement.clientWidth+%7C%7C+document.documentElement.clientHeight+)+)+{
++++//IE+6%2B+in+'standards+compliant+mode'
++++myWidth+=+document.documentElement.clientWidth;
++++myHeight+=+document.documentElement.clientHeight;
++}+else+if(+document.body+&&+(+document.body.clientWidth+%7C%7C+document.body.clientHeight+)+)+{
++++//IE+4+compatible
++++myWidth+=+document.body.clientWidth;
++++myHeight+=+document.body.clientHeight;
++}
++return+[myWidth,+myHeight];
}

$(window).scroll(function()
{
++++if($(window).scrollTop()+%2B+getWindowSize()[1]+==+getDocHeight())
++++{
++++++++alert("bottom!");
++++}
});|code-block|syntax|javascript|1153225|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/10795797/3406616|1|https://stackoverflow.com/a/3333336/3406616^0|V|D|0|19|F|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

<p>All these solutions doesn't work for me on Firefox and Chrome, so I use custom functions from <a href="https://stackoverflow.com/a/10795797/3406616">Miles O'Keefe</a> and <a href="https://stackoverflow.com/a/3333336/3406616">meder omuraliev</a> like this:</p>

<pre><code>function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement &amp;&amp; ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body &amp;&amp; ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});
</code></pre>


blocks|key|3273036|text|您可以尝试以下代码，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3273037|$("#dashboard-scroll").scroll(function(){
++++var+ele+=+document.getElementById('dashboard-scroll');
++++if(ele.scrollHeight+-+ele.scrollTop+===+ele.clientHeight){
+++++++console.log('at+the+bottom+of+the+scroll');
++++}
});|code-block|syntax|javascript|3273038|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can try the following code,</p>

<pre><code>$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});
</code></pre>


blocks|key|1903053|text|我的解决方案是简单的js：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1903054|​|1903055|let+el=document.getElementById('el');
el.addEventListener('scroll',+function(e)+{
++++if+(this.scrollHeight+-+this.scrollTop+-+this.clientHeight<=0)+{
++++++++alert('Bottom');
++++}
});|code-block|syntax|javascript|1903056|#el{
++width:400px;
++height:100px;
++overflow-y:scroll;
}|1903057|<div+id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>|1903058|1903059|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>My solution in plain js:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight&lt;=0) {
        alert('Bottom');
    }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="el"&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;div&gt;content&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3273096|text|如果滚动到底部，请尝试此匹配条件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3273097|if+($(this)[0].scrollHeight+-+$(this).scrollTop()+==+
++++$(this).outerHeight())+{

++++//code+for+your+custom+logic

}|code-block|syntax|javascript|3273098|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this for match condition if scroll to bottom end</p>

<pre><code>if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}
</code></pre>


blocks|key|3273131|text|这是我的两点意见，因为公认的答案对我不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3273132|var+documentAtBottom+=+(document.documentElement.scrollTop+%2B+window.innerHeight)+>=+document.documentElement.scrollHeight;|code-block|syntax|javascript|3273133|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's my two cents as the accepted answer didn't work for me.</p>

<pre><code>var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) &gt;= document.documentElement.scrollHeight;
</code></pre>


blocks|key|1903120|text|当检查可滚动的元素(即不是window)时，这会给出准确的结果：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1903121|//+`element`+is+a+native+JS+HTMLElement
if+(+element.scrollTop+==+(element.scrollHeight+-+element.offsetHeight)+)
++++//+Element+scrolled+to+bottom|code-block|syntax|javascript|1903122|offsetHeight应该给出元素(包括填充、边距、和滚动条)的实际可见高度，而scrollHeight是元素的整个高度，包括不可见(溢出)区域。|1903123|jQuery的.outerHeight()应该会给出与JS的.offsetHeight类似的结果--+offsetHeight的MDN文档对它的跨浏览器支持并不清楚。|1903124|var+offsetHeight+=+(+container.offsetHeight+?+container.offsetHeight+:+$(container).outerHeight()+);
if++(+container.scrollTop+==+(container.scrollHeight+-+offsetHeight)+)+{
+++//+scrolled+to+bottom
}|1903125|entityMap^0|7|2|D|6|0|0|0|C|15|C|R|1|X|4|1L|2|0|0|6|7|E|U|D|1F|C|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|Y|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|Z|8|@$9|10|A|11|B|D]|$9|12|A|13|B|D]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|E|@]|F|$]]|$1|N|3|O|5|6|7|1A|8|@$9|1B|A|1C|B|D]|$9|1D|A|1E|B|D]|$9|1F|A|1G|B|D]|$9|1H|A|1I|B|D]]|E|@]|F|$]]|$1|P|3|Q|5|I|7|1J|8|@]|E|@]|F|$J|K]]|$1|R|3|-4|5|6|7|1K|8|@]|E|@]|F|$]]]|S|$]]

<p>This gives accurate results, when checking on a scrollable <strong>element</strong> (i.e. not <code>window</code>):</p>

<pre><code>// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom
</code></pre>

<p><code>offsetHeight</code> should give the <strong>actual visible</strong> height of an element (including padding, margin, <strong>and</strong> scrollbars), and <code>scrollHeight</code> is the <strong>entire</strong> height of an element including invisible (overflowed) areas.</p>

<p><code>jQuery</code>'s <code>.outerHeight()</code> should give similar result to JS's <code>.offsetHeight</code> --
the documentation in MDN for <code>offsetHeight</code> is unclear about its cross-browser support. To cover more options, this is more complete:</p>

<pre><code>var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

</code></pre>


blocks|key|4683175|text|如果调用$(window).height()，Google+Chrome会给出页面的完整高度|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4683176|相反，可以使用window.innerHeight来检索窗口的高度。必要的检查应该是：|4683177|if($(window).scrollTop()+%2B+window.innerHeight+>+$(document).height()+-+50)+{
++++console.log("reached+bottom!");
}|code-block|syntax|javascript|4683178|entityMap^0|4|I|0|7|I|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Google Chrome gives the full height of the page if you call <code>$(window).height()</code></p>

<p>Instead, use <code>window.innerHeight</code> to retrieve the height of your window. 
Necessary check should be:</p>

<pre><code>if($(window).scrollTop() + window.innerHeight &gt; $(document).height() - 50) {
    console.log("reached bottom!");
}
</code></pre>


blocks|key|4683199|text|使用Intersection+Observer来检查最后一个元素在视口上是否可见(这意味着用户被滚动到底部)，而不是侦听scroll事件。它还支持使用polyfill的IE7。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4683200|​|4683201|var+observer+=+new+IntersectionObserver(function(entries){
+++if(entries[0].isIntersecting+===+true)
++++++console.log("Scrolled+to+the+bottom");
+++else
++++++console.log("Not+on+the+bottom");
},+{
+++root:document.querySelector('#scrollContainer'),
+++threshold:1+//+Trigger+only+when+whole+element+was+visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);|code-block|syntax|javascript|4683202|#scrollContainer{
++height:+100px;
++overflow:+hidden+scroll;
}|4683203|<div+id="scrollContainer">
++<div>Item+1</div>
++<div>Item+2</div>
++<div>Item+3</div>
++<div>Item+4</div>
++<div>Item+5</div>
++<div>Item+6</div>
++<div>Item+7</div>
++<div>Item+8</div>
++<div>Item+9</div>
++<div>Item+10</div>
</div>|4683204|4683205|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver|1|https://github.com/w3c/IntersectionObserver/tree/master/polyfill#browser-support^0|2|L|0|23|8|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]|$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]]]

<p>Instead of listening to the scroll event, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver" rel="noreferrer">Intersection Observer</a> is the <a href="https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/" rel="noreferrer">inexpensive</a> one for checking if the last element was visible on the viewport (that's mean user was scrolled to the bottom). It also supported for IE7 with the <a href="https://github.com/w3c/IntersectionObserver/tree/master/polyfill#browser-support" rel="noreferrer">polyfill</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="scrollContainer"&gt;
  &lt;div&gt;Item 1&lt;/div&gt;
  &lt;div&gt;Item 2&lt;/div&gt;
  &lt;div&gt;Item 3&lt;/div&gt;
  &lt;div&gt;Item 4&lt;/div&gt;
  &lt;div&gt;Item 5&lt;/div&gt;
  &lt;div&gt;Item 6&lt;/div&gt;
  &lt;div&gt;Item 7&lt;/div&gt;
  &lt;div&gt;Item 8&lt;/div&gt;
  &lt;div&gt;Item 9&lt;/div&gt;
  &lt;div&gt;Item 10&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3273321|text|显然，对我来说起作用的是'body‘而不是'window’：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3273322|$('body').scroll(function()+{


+if($('body').scrollTop()+%2B+$('body').height()+==+$(document).height())+{
+++++//alert+at+buttom
+}
+});|code-block|syntax|javascript|3273323|要实现跨浏览器兼容性，请使用：|3273324|++function+getheight(){
++++var+doc+=+document;
++++return++Math.max(
++++++++doc.body.scrollHeight,+doc.documentElement.scrollHeight,
++++++++doc.body.offsetHeight,+doc.documentElement.offsetHeight,
++++++++doc.body.clientHeight,+doc.documentElement.clientHeight

++++++++);
+++}|3273325|然后调用函数getheight()，而不是$(文档).height()|3273326|$('body').scroll(function()+{


+++if($('body').scrollTop()+%2B+$('body').height()+==+getheight()++)+{
+++++//alert+at+bottom
+}
});|3273327|对于接近底部的使用：|3273328|$('body').scroll(function()+{


if($('body').scrollTop()+%2B+$('body').height()+>+getheight()+-100+)+{
++++//alert+near+bottom
+}
+});|3273329|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Apparently what worked for me was 'body' and not 'window' like this:</p>

<pre><code>$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });
</code></pre>

<p>for cross-browser compatibility use:</p>

<pre><code>  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }
</code></pre>

<p>and then instead of $(document).height() call the function getheight()</p>

<pre><code>$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});
</code></pre>

<p>for near bottom use:</p>

<pre><code>$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() &gt; getheight() -100 ) {
    //alert near bottom
 }
 });
</code></pre>


blocks|key|3273378|text|许多其他的解决方案对我不起作用，因为在滚动到底部时，我的div触发了两次警报，当向上移动时，它也触发了几个像素，所以解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3273379|++++++++$('#your-div').on('resize+scroll',+function()
++++++++{
++++++++++++if+($(this).scrollTop()+%2B
++++++++++++++++$(this).innerHeight()+>=
++++++++++++++++$(this)[0].scrollHeight+%2B+10)+{

++++++++++++++++alert('reached+bottom!');
++++++++++++}
++++++++});|code-block|syntax|javascript|3273380|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Many other solutions doesn't work for me Because on scroll to bottom my div was triggering the alert 2 times and when moving up it was also trigerring upto a few pixels so The solution is:</p>
<pre><code>        $('#your-div').on('resize scroll', function()
        {
            if ($(this).scrollTop() +
                $(this).innerHeight() &gt;=
                $(this)[0].scrollHeight + 10) {

                alert('reached bottom!');
            }
        });
</code></pre>


blocks|key|3273466|text|我使用这个测试来检测到达底部的滚动：event.target.scrollTop+===+event.target.scrollHeight+-+event.target.offsetHeight|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3273467|entityMap^0|I|28|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>i used this test to detect the scroll reached the bottom:
<code>event.target.scrollTop === event.target.scrollHeight - event.target.offsetHeight</code></p>


blocks|key|4683422|text|Safari可以滚动页面的底部，这导致了我们的应用程序中的一个bug。使用>=而不是===来解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4683423|container.scrollTop+>=+container.scrollHeight+-+container.clientHeight|code-block|syntax|javascript|4683424|entityMap^0|11|2|16|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Safari can scroll past the bottom of the page which was causing a bug in our application. Solve this using <code>&gt;=</code> instead of <code>===</code>.</p>
<pre><code>container.scrollTop &gt;= container.scrollHeight - container.clientHeight
</code></pre>


blocks|key|4683444|text|如果有人想要一个普通的JavaScript解决方案，并且需要检测用户何时滚动到<div>的底部，我设法使用以下几行代码实现了它|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4683445|window.addEventListener("scroll",+()+=>+{
++++var+offset+=+element.getBoundingClientRect().top+-+element.offsetParent.getBoundingClientRect().top;
++++const+top+=+window.pageYOffset+%2B+window.innerHeight+-+offset;

++++if+(top+===+element.scrollHeight)+{
++++++++console.log("bottom");
++++}
},+{+passive:+false+});|code-block|syntax|javascript|4683446|entityMap^0|13|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>In case someone wants a vanilla JavaScript solution and needs to detect when a user has scrolled to the bottom of a <code>&lt;div&gt;</code> I managed to implement it by using these lines of code</p>
<pre class="lang-js prettyprint-override"><code>window.addEventListener(&quot;scroll&quot;, () =&gt; {
    var offset = element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top;
    const top = window.pageYOffset + window.innerHeight - offset;

    if (top === element.scrollHeight) {
        console.log(&quot;bottom&quot;);
    }
}, { passive: false });
</code></pre>


blocks|key|3273531|text|下面是最简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3273532|const+handleScroll+=+()+=>+{
if+(window.innerHeight+%2B+window.pageYOffset+>=+document.body.offsetHeight)+{
+++console.log('scrolled+to+the+bottom')
}}

window.addEventListener('scroll',+handleScroll)|code-block|syntax|javascript|3273533|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is the most simple way to do it:</p>
<pre><code>const handleScroll = () =&gt; {
if (window.innerHeight + window.pageYOffset &gt;= document.body.offsetHeight) {
   console.log('scrolled to the bottom')
}}

window.addEventListener('scroll', handleScroll)
</code></pre>


blocks|key|3273558|text|(2021)这里的许多答案都涉及到对element的引用，但如果你只关心整个页面，只需使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3273559|function+isBottom()+{
++const+{+scrollHeight,+scrollTop,+clientHeight+}+=+document.documentElement;
++const+distanceFromBottom+=+scrollHeight+-+scrollTop+-+clientHeight;
++return+distanceFromBottom+<+20;+//+adjust+the+number+20+yourself
}|code-block|syntax|javascript|3273560|entityMap^0|I|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>(2021)
Lots of answers here involve a ref to an <code>element</code>, but if you only care about the whole page, just use:</p>
<pre class="lang-js prettyprint-override"><code>function isBottom() {
  const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
  const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
  return distanceFromBottom &lt; 20; // adjust the number 20 yourself
}
</code></pre>


blocks|key|1903331|text|我已经用纯JS非常简单地做到了这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1903332|function+onScroll()+{++++
++++if+(window.pageYOffset+%2B+window.innerHeight+>=+document.documentElement.scrollHeight+-+50)+{
++++++++Console.log('Reached+bottom')
++++}
}
window.addEventListener("scroll",+onScroll);|code-block|syntax|javascript|1903333|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I Have done this very easy way with pure JS.</p>
<pre><code>function onScroll() {    
    if (window.pageYOffset + window.innerHeight &gt;= document.documentElement.scrollHeight - 50) {
        Console.log('Reached bottom')
    }
}
window.addEventListener(&quot;scroll&quot;, onScroll);
</code></pre>


<p>I'm making a pagination system (sort of like Facebook) where the content loads when the user scrolls to the bottom. I imagine the best way to do that is to find when the user is at the bottom of the page and run an Ajax query to load more posts.</p>
<p>The only problem is I don't know how to check if the user has scrolled to the bottom of the page. Any ideas?</p>
<p>I'm using jQuery, so feel free to provide answers that use it.</p>


Check if a user has scrolled to the bottom

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我想最好的方法是找出用户何时在页面底部，然后运行Ajax查询来加载更多的帖子。唯一的问题是我不知道如何检查用户是否滚动到了页面底部。有什么想法吗？我正在使用jQuery，所以请随时提供使用它的答案。

问检查用户是否已滚动到底部
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查用户是否已滚动到底部EN