用 scroll-snap-type 實現簡單 carousel 的坑！
阿新 • • 發佈：2021-08-28
第一個疑問，為什麼不用 plugin?
首先我需要在手機 scroll down（touch move up） 時，address 會自動收起。而市場的 carousel plugin 都是固定的高度，沒辦法夠我用
scroll-snap-type 看上去能解決我的需求
看這個例子，它只需要判斷要停留的位置，不需要有固定的高度
這 scroll-snap-type 只適合非常簡單的需求，而我需要而外的需求
- 點選 nav link，scroll to position, 要求 smooth scroll
- 第一個 slide 100%, 第二個 slide 到最後第二個 slide 是 100vh, 最後一個 slide 依據內容
感覺感覺這麼簡單的需求肯定沒問題的，結果
第一個問題是 IOS safari 不支援 behaviour smooth, 如果用 polyfill 的話，就不能和 scroll-snap-type 一起使用，可能是大家都是呼叫同個 element 吧……
第二個問題是當操作到最後一個 slide 時，要 remove scroll-snap-style, 聽起來不難啊，可是有個東西要餘力
什麼是餘力。又造成什麼問題？
在 touch device 滑動的過程中，手指一開始會觸碰螢幕（touchstart), 接著會移動要去的方向（touchmove），最後會手指離開螢幕（touchend）
可是當手指離開螢幕時，遊覽器的內容不會馬上停下來，而是慢慢的停下來。
我預計是 touchend 後馬上執行 remove style, 但是 IOS safari 需要等到餘力後才能停下……
除此之外，還有另一個坑
當 scroll up (touch move down) 時，手機遊覽器會試圖把 address bar 給還原，這時計算就會出現卡頓……
總結
看起來自己搞並沒有那麼簡單，尤其是需求不符合簡單標準時，更加不可能實現
Links