Infinite Scroll是一套當捲軸至底時，會載入下一個頁面的資料的原生JavaScript套件，在網路上很常見。行動裝置也支援

GitHub Star: 5,400
Javascripting Overall: -
瀏覽器: Chrome、Firefox和IE10+
RWD: 支援
License: GPLv3

《安裝》

• CDN

    <!-- Infinite Scroll v3.0.3 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/3.0.3/infinite-scroll.pkgd.min.js"></script>
  

• npm

    $ npm install infinite-scroll
  

• Bower

    $ bower install infinite-scroll --save
  

• Yarn

    $ yarn add infinite-scroll
  

《範例》

• 捲軸瀏覽至底載入另一頁面

    <style>
    	.article {
    		/* 排版用，不影響功能，*/
    		height: 300px;
    		margin: 50px;
    		background: #ccc;
    		font-size: 50px;
    		line-height: 300px;
    		text-align: center;
    	}
    </style>
    <div class="example">
    	<div class="article">1</div>
    	<div class="article">2</div>
    	<div class="article">3</div>
    	<div class="article">4</div>
    	<!-- 捲軸狀態 -->
    	<div class="scroller-status">
    		<div class="infinite-scroll-request loader-ellips"></div>
    		<p class="infinite-scroll-last">開始加載</p>
    		<p class="infinite-scroll-error">沒有頁面可以讀取了</p>
    	</div>
    </div>
    <script>
    	var infScroll = new InfiniteScroll( ".example", {
    		path: function() {
    			// 頁面路徑
    			if ( this.loadCount < 2 ) {
    				// 只讀取前兩頁資料
    				var nextIndex = this.loadCount + 2; // 2
    				return "page" + nextIndex + ".html"; // page2.html
    			}
    		},
    		append: ".article", // 匯入物件類別
    		status: ".scroller-status" // 捲軸狀態類別
    	})
    </script>
  

  [註1]

  屬性	描述

  path|頁面路徑
  append|匯入物件類別
  status|捲軸狀態類別

《延伸》

1. Infinite Scroll
2. metafizzy/infinite-scroll: ? Automatically add next page