Advertisement
Guest User

Untitled

a guest
Oct 12th, 2017
159
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.68 KB | None | 0 0
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement