API tools faq
paste
Advertisement
asimryu

detect end of scroll

asimryu
Nov 20th, 2019
344
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>detect end of scroll</title>
  6.     <style>
  7.         .red { color: red; }
  8.         .blue { color: blue; }
  9.         #scroll {
  10.             width: 500px;
  11.             height: 300px;
  12.             font-size: 30px;
  13.             line-height: 200%;
  14.             overflow-y: scroll;
  15.             border: 1px solid #888;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="scroll">
  21.         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quam error, laboriosam maiores, impedit blanditiis facilis velit obcaecati consequatur nulla explicabo possimus enim nihil repudiandae. Quia quod, sapiente quae provident!
  22.     </div>
  23.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  24.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  25.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  26.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  27.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  28.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  29.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  30.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  31.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  32.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  33.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  34.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  35.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  36.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  37.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  38.     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>
  39.  
  40.     <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
  41.  
  42.     <script>
  43.  
  44.         var extraText = [];
  45.         extraText[0] = "<h1 class='red'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>";
  46.        
  47.         extraText[1] = "<h1 class='blue'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti earum veniam aperiam quisquam iste ab modi tempore distinctio optio repudiandae, harum ut. Id ratione, molestiae nisi vitae nam fugiat eius?</h1>";
  48.         var initNum = 0;
  49.  
  50.         $(window).scroll(function(){
  51.             var sTop = $(window).scrollTop();
  52.             var sHeight = $(window).height();
  53.             var docHeight = $(document).height();
  54.             if( (sTop + sHeight) == docHeight ) {
  55.                 $("body").append(extraText[initNum]);
  56.                 if( initNum == 0 ) initNum = 1; else initNum = 0;
  57.             }
  58.         });
  59.  
  60.         $("#scroll").scroll(function(){
  61.             var sTop = $(this).scrollTop();
  62.             var sHeight = $(this).innerHeight();
  63.             var docHeight = $(this)[0].scrollHeight;
  64.             if( (sTop + sHeight) >= docHeight ) {
  65.                 $(this).append(extraText[initNum]);
  66.                 if( initNum == 0 ) initNum = 1; else initNum = 0;
  67.             }
  68.         });
  69.  
  70.     </script>
  71. </body>
  72. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!