# jscroll 可以無限往下捲動載入內容的套件

## 介紹
在 facebook、instagram主頁面或某些新聞網站，如果一直往下捲動，會看到內容一直被載入，永遠看不完，這類型的功能稱為 Infinite Scroll (無限捲動)。
雖然也有一個套件名稱就叫做Infinite Scroll，但他是GPLv3授權，商業使用可能需要付費。因此這篇介紹的是另一個相依於 jQuery，使用 MIT授權的 jscroll

## 官網
https://github.com/pklauzinski/jscroll

## 相依套件 jQuery
https://code.jquery.com/
相依於jQuery 1.8以上，而且因為有使用到animate功能，所以不能使用jQuery slim的版本，需要用完整版的jQuery

---

## 範例程式碼

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

<div class="scroll">
<p>主要內容</p>

<a class="jscroll-next" href="page1.html">next</a>
<a class="jscroll-next" href="page2.html">next</a>
</div>

<script>
$('.scroll').jscroll();
</script>

---

## 運作機制
這個套件的會抓取區塊內最後一個a連結指向的網址，將網址內容讀取出來後載入到指定區塊的底部，以上面的程式碼為例

這一段用jQuery 選擇器選了 scroll 這個 class，因此程式會取出 ```<div class="scroll">``` 包覆的區塊最後一個a的href，將page2.html的內容取出來放到最下面


---

## 進階設定
如果想進一步做更多設定，可以參考[官網的configuration](https://jscroll.com/#/configuration)

這邊節錄幾個重要選項


* loadingHtml: '<img  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Loading" /> Loading...',
讀取區塊等待時顯示的畫面，可以是文字或html
* loadingFunction:function(){ console.log('start'); },
讀取區塊時呼叫的js function
* nextSelector: 'a.jscroll-next:last',
指定要取得的連結位址，這樣就算更後面有別的連結也沒關係
* contentSelector: '.LoadMe'
讀取要載入的頁面內特定的html區塊，避免載入整個網頁nav或footer之類的內容
* callback:function(){ console.log('end'); }
全部結束後呼叫的js function

---

## 範例程式碼

<div class="scroll">
<p>主要內容</p>
<p>MainContent</p>

<a class="jscroll-next" href="page1.html">next</a>
<a class="jscroll-next" href="page2.html">next</a>
<a href="Website.com">OtherWebsite</a>
</div>

<script>
var option =
{
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
nextSelector: 'a.jscroll-next:last',
contentSelector: '.LoadMe'
}
$('.scroll').jscroll(option);
</script>

---

###### tags: `js`