下拉刷新 · 小龍哥的前端博客

# 下拉刷新的原理 ## 代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0,user-scalable=no"/> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .outscroll { position: relative; width: 100%; height: 100vh; } .header, li { text-align: center; margin: 5px 0px; } .list { position: absolute; width: 100%; top: 0; left: 0; background-color: white; } .bottom { text-align: center; display: none; } .bottom.active { display: block; } li { list-style-type: none; height: 30px; line-height: 20px; margin: 2px 10px; border-radius: 5px; background-color: #bebebe; z-index: 333; } </style> </head> <body> <div class="outscroll">  <div class="header"> <p>下拉刷新</p> </div> <div class="list"> <ul> <li>1</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>10</li> <li>1</li> </ul> </div>  </div> <script type="text/javascript"> // 內容list var list = document.getElementsByClassName('list')[0]; //外層滾動容器 var outscroll = document.querySelector('.outscroll'); var bottom = document.getElementsByClassName('bottom'); //記錄起點 var touchStart = 0; // 綁定事件 outscroll.addEventListener('touchstart', function (event) { //記錄初始位置的Y坐標 var touch= event.targetTouches[0] touchStart = touch.pageY; }); outscroll.addEventListener('touchmove', function (event) { var touch = event.targetTouches[0]; //計算偏移量 var top = list.offsetTop + touch.pageY - touchStart + "px"; list.style.top = top; //記錄這次的起點，防止重復累加偏移量 touchStart = touch.pageY; }); outscroll.addEventListener('touchend', function (event) { touchStart = 0; //判斷list.offsetTop是否為0，不為0，將其設置為0 var top = list.offsetTop; if (top > 0) { var time = setInterval(function () { list.style.top = list.offsetTop - 2 + 'px'; if(list.offsetTop <= 0) { list.style.top = 0 + 'px'; clearInterval(time); } }, 1) } }) </script> </body> </html> ~~~ ## 總結：其實關鍵是根據offsetTop屬性來判斷。offsetTop是容器相對瀏覽器的Top的距離（或者叫偏移量)