dom元素的自上而下自動滾動
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; overflow-y: auto; overflow-x: hidden; } </style> </head> <body> <div id="box"> <p>sdjfhjdshfjdshf</p> </div> </body> </html> <script> let interval = null; // 承載定時器對象 /** * * @param element dom * @param height dom元素的高度 * @param step 每次滾動步長 * @param timeSpace 定時器時間間隔 * @param delay 頁面加載完成之后多久之后進行滾動 * @param isAlways 當滾動到頁面底部之后是否進行再次滾動 * @param finishTime 完成滾動之后，若是允許多次滾動，設置延遲時間 * @param isMouseenter 是否有鼠標划入操作 */ function startScroll(element, height, step, timeSpace, delay, isAlways, finishTime, isMouseenter) { let temp = delay; if (isMouseenter === true) { delay = 0; } setTimeout(() => { interval = setInterval(() => { // 當element.scrollTop小於element.scrollHeight - height時執行定時器 if (element.scrollTop < element.scrollHeight - height) { element.scrollTop = element.scrollTop + step; } else { delay = temp; if (isAlways === true) { clearInterval(interval); element.scrollTop = 0; setTimeout(() => { startScroll(element, height, step, timeSpace, delay, isAlways, finishTime); }, finishTime) } else { clearInterval(interval); } } }, timeSpace); }, delay); } function stopScroll() { clearInterval(interval); } window.onload = function () { let element = document.getElementById('box'); for(let i=0; i<40; i++) { let str = document.createElement('p'); str.innerHTML = 'jdsfhjdshfjdshfjdshfdjshf'; element.appendChild(str); } startScroll(element, 300, 1, 20, 3000, true, 3000); element.onmouseenter = function () { stopScroll(); }; element.onmouseleave = function () { startScroll(element, 300, 1, 20, 3000, true, 3000, true); } } </script>