zoukankan      html  css  js  c++  java
  • 用 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

  • 相关阅读:
    改写历史,永久删除git库的物理文件
    双调排序
    GitHub从无到有
    Nginx的安装与基本应用
    Django从无到有的艰苦历程
    pycharm 相关设置问题
    ORM介绍
    Django中的过滤器
    FBV和CBV的差异
    django中models field详解
  • 原文地址:https://www.cnblogs.com/stooges/p/15200267.html
Copyright © 2011-2022 走看看