Use the scroll seamless positioning

Realized idea: scroll to the last one, when the first positioning using relative positioning, positioning to the last one of the following

let ul = document.querySelector('ul');
let liArr = ul.querySelectorAll('li');
let olArr = document.querySelector('ol').querySelectorAll('li');
let index = 0; let num = 0; let timer = setInterval(function () { if (index === 0) { liArr[0].style.position = 'static'; ul.style.top = 0; num = 0; } if (index === liArr.length - 1) { index = 0; liArr[0].style.position = 'relative'; liArr[0].style.top = liArr.length * 337.5 + 'px'; } else { index++; } num++; olArr.forEach(item => item.classList.remove('active')); olArr[index].classList.add('active'); startMove(ul, {top: -num*337.5}); }, 2000);

Note: 1, when the scroll to the first time, you need to reset the position ul, li and the first positioning canceled

       2, when the scroll to the last one, the first of Li, together with the relative positioning, top to the last one of the following

       3, startMove motion frame, can achieve their own

Guess you like

Origin www.cnblogs.com/xueZ/p/11277717.html
Recommended