原生訊息輪播滾動
阿新 • • 發佈：2021-07-08
需求
- 當訊息超出內容區域時滾動顯示
方法
- 當訊息內容超出總內容區域時新增一個與當前訊息內容一摸一樣的 dom 元素
- 將總內容區域的 overflow 設定為 hidden，隱藏多餘內容
- 然後控制總內容區域的 scrollTop 來向上輪播
- 然後當總內容區域的 scrollTop 大於第二個 dom 元素的 offsetTop
- 證明第二個 dom 元素剛好滾動到第一個 dom 元素初始位置
- 將總內容區域的 scrollTop 減去第一個元素的高度
擴充套件
offsetTop 距離上方或上層控制元件的位置，整型，單位畫素
scrollTop 內容頂部（捲起來的）到它的視口可見內容（的頂部）的距離的度量
offsetHeight
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>訊息滾動</title> <style type="text/css"> #root { height: 100px; overflow: hidden; } ul { padding: 0; margin: 0; } .item { height: 20px; } </style> </head> <body> <div id="root"> <ul class="content"> <li class="item"> 滾動訊息一 </li> <li class="item"> 滾動訊息二 </li> <li class="item"> 滾動訊息三 </li> <li class="item"> 滾動訊息四 </li> <li class="item"> 滾動訊息五 </li> <li class="item"> 滾動訊息六 </li> <li class="item"> 滾動訊息七 </li> </ul> </div> <script> const root = document.getElementById('root'); // 獲取外部容器 console.log(root.offsetHeight,root.scrollTop) const content = document.getElementsByClassName('content')[0]; // 獲取訊息容器 console.log(content.offsetHeight,content.scrollTop) const content2 = document.createElement("ul"); // 建立第二個訊息內部容器 setTimeout(() => { const speed = 80 // 速度 // 當訊息超出外部容器時 if (root.offsetHeight < content.offsetHeight) { content2.innerHTML = content.innerHTML; root.append(content2); } function Marquee() { // content2.offsetTop 距離上方或上層控制元件的位置，整型，單位畫素 // root.scrollTop 內容頂部（捲起來的）到它的視口可見內容（的頂部）的距離的度量 if (content2.offsetTop - root.scrollTop <= 0) root.scrollTop -= content.offsetHeight else { root.scrollTop++ } } setInterval(Marquee, speed) }, 1000) </script> </body> </html>