用 scroll-snap-type 实现简单 carousel 的坑！

第一个疑问，为什么不用 plugin?

首先我需要在手机 scroll down（touch move up） 时，address 会自动收起。而市场的 carousel plugin 都是固定的高度，没办法够我用

 

scroll-snap-type 看上去能解决我的需求

看这个例子，它只需要判断要停留的位置，不需要有固定的高度

 

这 scroll-snap-type 只适合非常简单的需求，而我需要而外的需求

  1. 点击 nav link，scroll to position, 要求 smooth scroll
  2. 第一个 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

 

posted @ 2021-08-28 15:56  泉油  阅读(421)  评论(0)  编辑  收藏  举报
Web Design Johor Bahru Malaysia - Stooges