單頁滾動外掛 One page Scroll ［推薦］

推薦不錯的單頁捲動插件、外掛。

▍外掛選擇

找了很多 One page scroll 的 JavaScript 外掛 很多都不是很府和專案需求，至少要能夠控制頁面前、後和跳頁，然後不需依賴 jQuery。

一開始找到 FullPage.js 很完美，但是 3.x 版本需要一個 licenseKey，也就是要付費的意思，所以使用了 2.x 版本，但是又要搭配 jQuery，所以忍痛放棄這強大的外掛。

說個題外話，如果使用 FullPage.js，頁面中如使用動畫外掛 AOS 會載入失敗，原因就是因為 AOS 是靠滾動條來觸發動畫，但由於 FullPage.js 並不滾動網站，還得另外設置。

後來發現一個外掛 — Pageable，府和所有需求，但是有些 Bug，下面會分享處理辦法。

▍Pageable 外掛

會使用它是因為

1. 他不需要 jQuery
2. 有很多事件可以呼叫，改變滾動頁面

現在讓我們來探討我在使用上遇到的兩個 Bug

• 手機平板畫面時，無法點擊內容
• 使用筆電或 Mac 滑鼠滾動頁面時化造成慣性滑動，導致持續滑動好幾頁。

無法點擊內容

這是由於 Pageable 捕捉到觸摸事件而阻止事件發生，在 JS 裡阻止事件發生不外乎就是 event.preventDefault() 。

所以在 Pageable 原始碼中找到 this._preventDefault(e) 將它註解。

持續滑動好幾頁

首先安裝一個外掛 lethargy，它可以用來偵測滑動時是否慣性滑動。

開啟 Pageable 原始碼，加入下面程式碼

用以判斷如果是慣性滑動則停止 _wheel()。