List content auto scroll up (native JS)

1. html structure: the core is ul > Li, and the outer layer of ul is wrapped with div. Because we want the content to scroll seamlessly, we need to have a ul of the same content after the original ul. The following picture:

(the red border is the visual area div, and overflow:hidden; is removed for the convenience of viewing.)

2. Style: to scroll, you must have two ul heights > the height of the outer visible div, and the div must have overflow: hidden;

HTML:

1 <div id="review_box"> 2 <ul id="comment1"> 3 <li>Article 1</li> 4 <li>Second article</li> 5 <li>Third article</li> 6 <li>Fourth article</li> 7 <li>Fifth article</li> 8 <li>Sixth article</li> 9 </ul> 10 <ul id="comment2"></ul> 11 </div>

CSS:

1 * { 2 margin: 0; 3 padding: 0; 4 } 5 div { 6 width: 100px; 7 height: 63px; /* Must */ 8 overflow: hidden;/* Must */ 9 margin: 50px auto; 10 border: 1px solid red; 11 text-align: center; 12 } 13 ul { 14 list-style: none; 15 }

JavaScript:

1 window.onload = roll(50); 2 3 function roll(t) { 4 var ul1 = document.getElementById("comment1"); 5 var ul2 = document.getElementById("comment2"); 6 var ulbox = document.getElementById("review_box"); 7 ul2.innerHTML = ul1.innerHTML; 8 ulbox.scrollTop = 0; // Set to 0 when no scrolling starts 9 var timer = setInterval(rollStart, t); // Setting timer, parameters t Used for interval time (in milliseconds), parameter t The smaller, the faster 10 // Mouse migration div Pause scrolling on 11 ulbox.onmouseover = function () { 12 clearInterval(timer); 13 } 14 // Mouse removal div Continue scrolling after 15 ulbox.onmouseout = function () { 16 timer = setInterval(rollStart, t); 17 } 18 } 19 20 // Start scrolling function 21 function rollStart() { 22 // Stated above DOM Object needs to be declared again as a local object 23 var ul1 = document.getElementById("comment1"); 24 var ul2 = document.getElementById("comment2"); 25 var ulbox = document.getElementById("review_box"); 26 // Normal rolling scrollTop Value+1,Return to 0 when the scrolling height is greater than the list content height 27 if (ulbox.scrollTop >= ul1.scrollHeight) { 28 ulbox.scrollTop = 0; 29 } else { 30 ulbox.scrollTop++; 31 } 32 }

*If there is any mistake, please correct it

*Reprint please indicate the source

6 November 2019, 14:15 | Views: 6015