SHARE
TWEET

Untitled

a guest Oct 12th, 2017 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. window.onscroll = function(ev) {
  2.     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  3.         // you're at the bottom of the page
  4.     }
  5. };
  6.    
  7. window.onscroll = function(ev) {
  8.     if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
  9.         alert("you're at the bottom of the page");
  10.     }
  11. };
  12.    
  13. (window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2
  14.    
  15. window.onscroll = function(ev) {
  16.     if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
  17.       // you're at the bottom of the page
  18.       console.log("Bottom of page");
  19.     }
  20. };
  21.    
  22. // document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
  23. // With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
  24. // only a <pre> or something like that) but I don't know when. This hack seems to work always.
  25. var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
  26.  
  27. // Grodriguez's fix for scrollHeight:
  28. // accounting for cases where html/body are set to height:100%
  29. var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
  30.  
  31. // >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
  32. // it and in that case the left side of the equation is somewhat greater.
  33. var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;
  34.  
  35. // As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
  36. // Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
  37. // the correct vertical scrollTop would be
  38. // scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
  39. // Since we don't know the visibility/size of the horizontal scrollbar
  40. // we scroll to scrollHeight that exceeds the value of the
  41. // desired scrollTop but it seems to scroll to the bottom with all browsers
  42. // without problems even when the horizontal scrollbar is visible.
  43. var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
  44. window.scrollTo(scrollLeft, scrollHeight);
  45.    
  46. <!DOCTYPE html>
  47. <html>
  48. <head>
  49.     <style>
  50.         div {
  51.             height: 100px;
  52.             border-bottom: 1px solid #ddd;
  53.         }
  54.  
  55.         div:nth-child(even) {
  56.             background: #CCC
  57.         }
  58.  
  59.         div:nth-child(odd) {
  60.             background: #FFF
  61.         }
  62.  
  63.     </style>
  64. </head>
  65.  
  66. <body>
  67. <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  68. <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  69. <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  70. <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  71. <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  72. </body>
  73.  
  74. <script type="text/javascript">
  75. console.log("Doc Height = " + document.body.offsetHeight);
  76. console.log("win Height = " + document.documentElement.clientHeight);
  77. window.onscroll = function (ev) {
  78.     var docHeight = document.body.offsetHeight;
  79.     docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
  80.  
  81.     var winheight = window.innerHeight;
  82.     winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
  83.  
  84.     var scrollpoint = window.scrollY;
  85.     scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
  86.  
  87.     if ((scrollpoint + winheight) >= docHeight) {
  88.         alert("you're at the bottom");
  89.     }
  90. };
  91. </script>
  92. </html>
  93.    
  94. var wrapper = document.getElementById('wrapper');
  95.  
  96. wrapper.onscroll = function (evt) {
  97.   if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
  98.     console.log('reached bottom!');
  99.   }
  100. }
  101.    
  102. window.onscroll = function(evt) {
  103.   var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
  104.   if (check) { console.log("You're at the bottom!"); }
  105. };
  106.    
  107. $(document).ready(function(){
  108.     $('.NameOfYourDiv').on('scroll',chk_scroll);
  109. });
  110.  
  111. function chk_scroll(e)
  112. {
  113.     var elem = $(e.currentTarget);
  114.     if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
  115.     {
  116.         alert("scrolled to the bottom");
  117.     }
  118.  
  119. }
  120.    
  121. window.onscroll = function(ev) {
  122.     if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
  123.         alert("you're at the bottom of the page");
  124.     }
  125. };
  126.    
  127. window.onscroll = function() {
  128.     var scrollHeight, totalHeight;
  129.     scrollHeight = document.body.scrollHeight;
  130.     totalHeight = window.scrollY + window.innerHeight;
  131.  
  132.     if(totalHeight >= scrollHeight)
  133.     {
  134.         console.log("at the bottom");
  135.     }
  136. }
RAW Paste Data
Top