How to make a UL have infinite scroll?-CodePudding

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>

CodePudding user response：

Scroll just one div, not the whole page
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>

CodePudding user response：

To add an auto scroll effect to a specific element on the page, you can use JavaScript and the scrollTop and setInterval methods. Here's an example of how you can do this for a ul element with the id scroll-list:

const scrollList = document.getElementById('scroll-list');

setInterval(function() {
  scrollList.scrollTop  = 1;
}, 10);

This will cause the ul element to scroll down by 1 pixel every 10 milliseconds. To make the scroll infinite, you can use the scrollHeight property to check if the ul has reached the end, and if it has, reset the scrollTop back to 0:

const scrollList = document.getElementById('scroll-list');

setInterval(function() {
  if (scrollList.scrollTop === scrollList.scrollHeight - scrollList.clientHeight) {
    scrollList.scrollTop = 0;
  } else {
    scrollList.scrollTop  = 1;
  }
}, 10);

This will cause the ul to scroll down until it reaches the end, and then reset back to the top and start over again. You can adjust the scroll speed by changing the value of the setInterval delay (in this case, 10 milliseconds).