所以到底什麼是滑順滾動呢？
很簡單，就是上面說的「綁架滾動」，也有人說 Scroll Hijacking。在程式意義上就是，我們直接停止了遊覽器原生的滾動方式，另外自己重新定義滾動的速度、煞車、緩動、延遲等等。
沒事幹嘛綁架人家的滑鼠？
大約在2016年左右，當時的 ES 還沒真正開始 Coding，大多使用 WordPress 的主題搭配 Elementor 為客戶架設網站。但我們注意到像是 ↗Awwwards，這類獎項網站，早已出現許多叫做 Parallax 滾動視差的特效，接著在 2018 左右發現更多網站重新定義了滾動這件事，當我們看一摸到這種滾動，就深深愛上了這種滾動的滑順、視差等特效，但當時的技術能力根本還不到這個層級，完全找不到相關資源如何做這些事。
這真的沒有任何理由，因為滾的太順了，希望你可以了解，這就是一種愛！
因為找不到資源可以開始，我竟然破天荒的想說，那我自己寫吧 ，於是 ↗Miles Ltd 這客戶就被我們推坑了！（其實當下根本沒把握可以寫出來）
客戶非常的年輕，所以對網站體驗上也非常想嘗試最新的特效，再加上他們把 TA 定義成 ZARA 等大型時尚公司。在各種討論結果之後，決定做橫向滾動的網站。
橫向滾動其實可以很簡單搭配 CSS 直接做到，完全沒必要搞這些，但 CSS 做出來的橫向滾動，滾起來就是不夠滑。出於對滑順的愛，竟然有機會，就要嘗試看看啊！於是 Miles 這客戶的專案就催生了我們第一個滑順滾動的案例，而且還是用 jQuery 完全手刻的，現在想起來還是覺得自己非常的酷。
Locomotive Scroll
在我們自己寫完滑順滾動之後沒多久，就發現了有個套件叫做 ↗ Locomotive Scroll 。當時看到這套件的完整性，是整個“哇！！”，真的好厲害啊，直接被 Locomotive.ca 這間設計公司圈粉（雖然我當時已經是馮宇老師的忠實粉絲...有種出軌的感覺？），當你在這個 Demo 網站滾動最底部時，會出現...
DAMN YOU REALLY LIKE TO SCROLL
這很大大的震撼到我心呢，立刻就放棄了自己寫的滾動...跑去使用偶像的滾動。於是開啟了我們的滑順之路...延伸更多例如頁面轉場、進場特效、元件回饋等等...追求滑順的極致！
滑順的缺點
在網站設計中使用滑順滾動最大的第一個缺點就是，非常...非常...非常...非常的麻煩😩，幾乎所有其他套件都要重新整理後才能使用，不然就是得自己寫...，GSAP、Swiper、Slick等等...很多程式都必須等他讀取完，做好 Promise 順序（小嫩嫩的我們一開始還是用 setTimeout 慢慢等順序），各種網頁高度變化都要另外處理細節，甚至最簡單的手風琴開關效果，都變得超級困難以及麻煩。
在手機版很容易在 LINE、Facebook 這種 APP 另外做的遊覽器一個不小心 User 就可以滑出去了，因為滾動被綁架了，APP 另外產生的遊覽器會判斷你已經滑動到頂端要離開了... 於是...很可惜手機版我們通常會拔掉滑順滾動的特效，也就意味著你又要針對手機版多做一層工，又增加成本了😓。
另外一個缺點就是有另一派工程師，其實並不喜歡被滑鼠綁架，而且還非常討厭呢，在某種程度上可能會丟失這類型的工程師 TA 族群？
“不適合”使用的網站類型？
以上說到缺點就是要很大幅度改寫市面上所有套件，所以在某些專案上其實並不適合。要使用滑順滾動某種程度就是成本會很大幅度的提升。
1. 預算不足的客戶
這應該不用描述太多，因為成本太高。
2. 資訊型網站
這類型網站需要讓 User 專注在資訊的閱讀，而不是享受氛圍、或者體驗品牌視覺，所以並不適合。例如 部落格、新聞網等等。
3. 平台產品
較大的購物車網站、Airbnb、後台介面系統，這類型網站與資訊型網站類似，必須專注在資訊閱讀、操作體驗，綁架滾動只會讓操作變得更困難，而且產品程式碼維護變困難。
4. 無障礙網站
無障礙網站設計需要透過鍵盤操作、各種有障礙人士使用的特殊介面操作，滾動有很大程度需要依賴原生遊覽器已替你寫好的位置，這時使用滑順滾動應該是...製造麻煩而已😅
“適合”使用的網站類型
1. 品牌官網、個人網站
如果是 B2B、專業型服務等，非常適合，假設你的網站流量6成來自於手機4成來自於電腦，那你要聚焦在4成使用者上，讓客戶眼睛亮眼。在我們經驗裡，網站不是招攬更多使用者、流量高就好，而是怎麼更高效率提升你的轉換率。
2. 活動網站
活動網站一般來說會玩的比較酷，需要很高程度的立即吸引關注力，這時滑順滾動會是其中一個加分的項目。
3. 高互動網站
遊戲網站、歷史體驗、產品網站，現在玩 Parallax 滾動視差的網站已經到處都是，產品、遊戲、歷史介紹等會很高程度使用 Parallax，這時搭配滑順滾動，會是非常高的加分，例如滾動頁面時產品會跟著旋轉，或者歷史年份滾動頁面時展示各種不同排版資訊，這時你重新改寫滾動的順暢感，將會很大幅提升使用者體驗。
有這麼多缺點，為什麼還要用呢？
不得不說，以上說了許多使用滑順滾動的負面，會大幅提升工程師白頭髮生長，以及許多不適用的缺點，這確實是一個對使用者加分並不大，卻成本很大的一個不符合經濟效益作法。
我們認為“網站設計特效、動態”並不是華麗就好，我們更注重那細節加分的體驗。
我們專注在特效動態的細節，滑順滾動只是其中一個項目，任何事情要做的好，需要環環到位。例如一個品牌體驗要好，不只有 LOGO 要好、標準字要好、差異化要有、CIS 系統要好、公司對 CIS 沿用程度也要很高的規範以及嚴格執行，攝影師要好，產品價格要好...產品品質要好...客戶服務要好。（恩...做生意好難）
在網站設計的特效之中，還有更多更多得處理的細節，我們將在這系列文章之中一一列出一些基礎，不止給大家更多知識，也是對我們團隊自己，能更高提升設計細節的省思。
