下拉載入更多DEMO(js實現)
阿新 • • 發佈：2019-01-25
專案的一個前端頁面展示已購買商品時，要求能下拉載入更多。花了點時間研究這個功能，以前沒做過。
首先需要給div加scroll事件，監聽滾動條滾動動作。那何時觸發載入動作呢？當滾動條滾到底的時候。如何判斷滾動條滾到底呢？
當滾動條的高度加上滾動條到div頂部的高度等於div的可滾動高度時，說明滾動條到底部了。公式如下。
[javascript] view plain copy
- this.scrollHeight <= $(this).scrollTop() + $(this).height()
給出一個能跑的demo，需要引入jquery。
- <!DOCTYPE html>
- <html>
- <head>
- <script src="jquery.js" type="text/javascript"></script>
- </head>
- <body>
- <div>下拉載入更多</div>
- <div class="main" style="height:700px;overflow:auto;">
-
<div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div>
- </div>
- </body>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".main").unbind("scroll").bind("scroll", function(e){
- var sum = this.scrollHeight;
-
if(sum <= $(this).scrollTop() + $(this).height()) {
- $(".main").append($(".child").clone());
- }
- });
- });
- </script>
- </html>
如果等滾動條拉到底部時再載入，會影響使用者體驗。因為一般動態載入的時候都需要向服務端請求資源，這時需要時間。一個更佳的方式是，當滾動條距離底部一定距離（C）時，就動態載入更多，向服務端請求資源。也就是預載入，預讀取。公式如下。 [javascript] view plain copy
- this.scrollHeight - C <= $(this).scrollTop() + $(this).height()
一個js功能，最後發現其實是個數學問題。最開始看同事寫的類似功能的程式碼式，十分繁瑣。當自己總結完這個公式後，思路立刻清晰了。透過現象看本質。