js How to realize the automatic scrolling and looping of the list

This article mainly introduces js How to realize the relevant knowledge of automatic scrolling and looping of the list , The content is detailed and easy to understand , The operation is simple and fast , It has certain reference value , I believe that after reading this article js How to realize the automatic scrolling and looping of the list and play the articles will be fruitful , Let's have a look .

1. Achieve the effect diagram

Mouse migration , Pause scrolling ; Mouse removal , Keep rolling

2. principle

• To achieve seamless connection , In the original ul There should be a similar content later ul;

• Outermost layer div Is the visible area , set up overflow：hidden;

• 2 individual ul Height > Outer visibility div Height , To scroll ;

3. Implementation code

html：

<!-- vue --><div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)">    <ul id="comment1">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul>    <ul id="comment2"></ul></div>

css:

div {    height: 100px; /*  must  */    overflow: hidden;/*  must  */}

js:

//vue datadata (){    return {        timer: null,    }},mounted() {      this.roll(60);},beforeDestroy() {      if (this.timer) clearInterval(this.timer);},//vue methodsroll(t) {    var ul1 = document.getElementById("comment1");    var ul2 = document.getElementById("comment2");    var ulbox = document.getElementById("review_box");    ul2.innerHTML = ul1.innerHTML;    ulbox.scrollTop = 0;    this.rollStart(t);},rollStart(t) {    var ul1 = document.getElementById("comment1");    var ul2 = document.getElementById("comment2");    var ulbox = document.getElementById("review_box");    this.rollStop();    this.timer = setInterval(()=>{        //  When the scroll height is greater than the height of the list content, it returns to 0        if (ulbox.scrollTop >= ul1.scrollHeight) {            ulbox.scrollTop = 0;        } else {            ulbox.scrollTop++;        }    }, t);},rollStop(){    clearInterval(this.timer);},

About “js How to realize the automatic scrolling and looping of the list ” That's all for this article , Thank you for reading ！ I'm sure you're right “js How to realize the automatic scrolling and looping of the list ” Knowledge has a certain understanding , If you want to learn more , Welcome to the Yisu cloud industry information channel .