js 垂直滾動、中獎列表滾動
阿新 • • 發佈：2020-08-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>垂直滾動</title> <style> #demo { list-style: none; height: 150px; overflow: hidden; } </style> </head> <body> <ul id="demo"> <li>180****1234 邀請5人提現100元</li> <li>180****1234 邀請4人提現100元</li> <li>180****1234 邀請7人提現100元</li> <li>180****1234 邀請4人提現100元</li> <li>180****1234 邀請21人提現100元</li> <li>180****1234 邀請12人提現100元</li> <li>180****1234 邀請13人提現100元</li> <li>180****1234 邀請2人提現100元</li> <li>180****1234 邀請9人提現100元</li> <li>180****1234 邀請6人提現100元</li> <li>180****1234 邀請5人提現100元</li> <li>180****1234 邀請8人提現100元</li> <li>180****1234 邀請1人提現100元</li> <li>180****1234 邀請9人提現100元</li> <li>180****1234 邀請11人提現100元</li> <li>180****1234 邀請10人提現100元</li> <li>180****1234 邀請16人提現100元</li> <li>180****1234 邀請9人提現100元</li> <li>180****1234 邀請4人提現100元</li> </ul> <script src="jquery.min.js"></script> <script> function customScroll(id, delay = 150) { if (!id) { throw new Error("選擇器不存在"); } let timer = null; let _elem = document.getElementById(id); let c = function(){ if (timer) { clearInterval(timer); } _elem.onmouseover = function () { clearInterval(timer); } _elem.onmouseout = function () { c(); } if (_elem.scrollHeight >= _elem.offsetHeight) { timer = setInterval(() => { if(_elem.scrollTop >= _elem.scrollHeight){ _elem.scrollTop = 0; } else { if (_elem.scrollTop >= _elem.children[0].offsetHeight) { _elem.append(_elem.children[0]); } _elem.scrollTop++; } }, delay); } } return c; } let callback = customScroll('demo'); callback(); </script> </body> </html>