Search code examples
javascripthtmljqueryscrollinfinite-scroll

How to make a UL have infinite scroll?

I have a super long list that don't fit on the screen and I'm try to do add an auto scroll top to bottom of the ul elements and to be infinitive, I was able to do the following code but it does the whole page and only want the ul.

I tried replacing
html with #top
and
body with#bottom

<div id="top"></div>
<div>
   <ul> 
      <li>Lorem ipsum<span>Quis nostrud exercitation</span></li><li>Test 17<span>Test 17</span></li><li>Test 9<span>Test 9</span></li><li>Test 10<span>Test 10</span></li><li>Test 11<span>Test 11</span></li><li>Test 12<span>Test 12</span></li><li>Test 13<span>Test 13</span></li><li>Test 14<span>Test 14</span></li><li>Test 15<span>Test 15</span></li><li>Test 18<span>Test 18</span></li><li>Test 2<span>Test </span></li><li>Test 16<span>Test 16</span></li><li>Test 19<span>Test 19</span></li><li>Test 3<span>Test </span></li><li>Test 20<span>Test 20</span></li><li>Test 21<span>Test 21</span></li><li> Nam libero tempore<span>Cum soluta nobis est</span></li><li>Test 5<span>Test </span></li><li>Test 6<span>Test </span></li><li> Et harum quidem<span>Temporibus autem quibusdam</span></li><li>Test 23<span>Test 23</span></li><li>Test 22<span>Test 22</span></li>
      <li>Lorem ipsum<span>Quis nostrud exercitation</span></li><li>Test 17<span>Test 17</span></li><li>Test 9<span>Test 9</span></li><li>Test 10<span>Test 10</span></li><li>Test 11<span>Test 11</span></li><li>Test 12<span>Test 12</span></li><li>Test 13<span>Test 13</span></li><li>Test 14<span>Test 14</span></li><li>Test 15<span>Test 15</span></li><li>Test 18<span>Test 18</span></li><li>Test 2<span>Test </span></li><li>Test 16<span>Test 16</span></li><li>Test 19<span>Test 19</span></li><li>Test 3<span>Test </span></li><li>Test 20<span>Test 20</span></li><li>Test 21<span>Test 21</span></li><li> Nam libero tempore<span>Cum soluta nobis est</span></li><li>Test 5<span>Test </span></li><li>Test 6<span>Test </span></li><li> Et harum quidem<span>Temporibus autem quibusdam</span></li><li>Test 23<span>Test 23</span></li><li>Test 22<span>Test 22</span></li>
      <li>Lorem ipsum<span>Quis nostrud exercitation</span></li><li>Test 17<span>Test 17</span></li><li>Test 9<span>Test 9</span></li><li>Test 10<span>Test 10</span></li><li>Test 11<span>Test 11</span></li><li>Test 12<span>Test 12</span></li><li>Test 13<span>Test 13</span></li><li>Test 14<span>Test 14</span></li><li>Test 15<span>Test 15</span></li><li>Test 18<span>Test 18</span></li><li>Test 2<span>Test </span></li><li>Test 16<span>Test 16</span></li><li>Test 19<span>Test 19</span></li><li>Test 3<span>Test </span></li><li>Test 20<span>Test 20</span></li><li>Test 21<span>Test 21</span></li><li> Nam libero tempore<span>Cum soluta nobis est</span></li><li>Test 5<span>Test </span></li><li>Test 6<span>Test </span></li><li> Et harum quidem<span>Temporibus autem quibusdam</span></li><li>Test 23<span>Test 23</span></li><li>Test 22<span>Test 22</span></li>
  </ul>
</div>
<div id="bottom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript"> 

$("html, body").animate({ scrollTop: $(document).height() }, 4000);

setTimeout(function() {
    $('html, body').animate({scrollTop:0}, 4000); 
},4000);


setInterval(function(){ 
    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
    $('html, body').animate({scrollTop:0}, 4000); 
    },4000);

},8000);
 

</script>
Solution
    1. Scroll just one div, not the whole page
    2. You need to restrict the height of container with list

    See the code below

    $("#autoscroll").animate({ scrollTop: $(document).height() }, 4000);

setTimeout(function() {
    $('#autoscroll').animate({scrollTop:0}, 4000); 
},4000);


setInterval(function(){ 
    $("#autoscroll").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
    $('#autoscroll').animate({scrollTop:0}, 4000); 
    },4000);

},8000);
    <div id="top">blah blah</div>
<div id="autoscroll" style="height: 80vh; overflow: auto;">
   <ul> 
      <li>Lorem ipsum<span>Quis nostrud exercitation</span></li><li>Test 17<span>Test 17</span></li><li>Test 9<span>Test 9</span></li><li>Test 10<span>Test 10</span></li><li>Test 11<span>Test 11</span></li><li>Test 12<span>Test 12</span></li><li>Test 13<span>Test 13</span></li><li>Test 14<span>Test 14</span></li><li>Test 15<span>Test 15</span></li><li>Test 18<span>Test 18</span></li><li>Test 2<span>Test </span></li><li>Test 16<span>Test 16</span></li><li>Test 19<span>Test 19</span></li><li>Test 3<span>Test </span></li><li>Test 20<span>Test 20</span></li><li>Test 21<span>Test 21</span></li><li> Nam libero tempore<span>Cum soluta nobis est</span></li><li>Test 5<span>Test </span></li><li>Test 6<span>Test </span></li><li> Et harum quidem<span>Temporibus autem quibusdam</span></li><li>Test 23<span>Test 23</span></li><li>Test 22<span>Test 22</span></li>
      <li>Lorem ipsum<span>Quis nostrud exercitation</span></li><li>Test 17<span>Test 17</span></li><li>Test 9<span>Test 9</span></li><li>Test 10<span>Test 10</span></li><li>Test 11<span>Test 11</span></li><li>Test 12<span>Test 12</span></li><li>Test 13<span>Test 13</span></li><li>Test 14<span>Test 14</span></li><li>Test 15<span>Test 15</span></li><li>Test 18<span>Test 18</span></li><li>Test 2<span>Test </span></li><li>Test 16<span>Test 16</span></li><li>Test 19<span>Test 19</span></li><li>Test 3<span>Test </span></li><li>Test 20<span>Test 20</span></li><li>Test 21<span>Test 21</span></li><li> Nam libero tempore<span>Cum soluta nobis est</span></li><li>Test 5<span>Test </span></li><li>Test 6<span>Test </span></li><li> Et harum quidem<span>Temporibus autem quibusdam</span></li><li>Test 23<span>Test 23</span></li><li>Test 22<span>Test 22</span></li>
      <li>Lorem ipsum<span>Quis nostrud exercitation</span></li><li>Test 17<span>Test 17</span></li><li>Test 9<span>Test 9</span></li><li>Test 10<span>Test 10</span></li><li>Test 11<span>Test 11</span></li><li>Test 12<span>Test 12</span></li><li>Test 13<span>Test 13</span></li><li>Test 14<span>Test 14</span></li><li>Test 15<span>Test 15</span></li><li>Test 18<span>Test 18</span></li><li>Test 2<span>Test </span></li><li>Test 16<span>Test 16</span></li><li>Test 19<span>Test 19</span></li><li>Test 3<span>Test </span></li><li>Test 20<span>Test 20</span></li><li>Test 21<span>Test 21</span></li><li> Nam libero tempore<span>Cum soluta nobis est</span></li><li>Test 5<span>Test </span></li><li>Test 6<span>Test </span></li><li> Et harum quidem<span>Temporibus autem quibusdam</span></li><li>Test 23<span>Test 23</span></li><li>Test 22<span>Test 22</span></li>
  </ul>
</div>
<div id="bottom">blah blah</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>