实现小小的fullpage

需求背景

今天运营给了一个需求,要做个引导页,也就是全屏滚动。考虑到只有3张图,就自己码个吧!说干就干。

思路

  1. 设置一个外层container, 用户的可见区域,也就是全屏
  2. container内有3个层次,每个层次大小都跟container一样大小
  3. 每次滚动时候通过css的transform属性进行偏移,并结合transition过渡一下效果

scrollContainer是用来滚动内容的,所以在页面进入的时候要获取用户区域

逻辑部分

为了防止滚动多次滚动,需要通过一个变量来控制是否滚动,这里的动画是1s执行完,使用setTimeout延迟1s后解锁,这样大体逻辑差不多

差不多了,大体已经完成,在浏览器中运行也几乎完美!但是我们是一家千牛应用,在千牛里面运行,看似不错,但是鼠标快速移动就会出现闪屏、多滚动问题

解决问题

出现这个问题,第一反应是代码写错了,没有兼容浏览器,但是一想千牛就是chrome内核,不需要写兼容代码啊!

方案1

不采用css动画,采用jquery动画。改变top值。
也尝试了这个方案,选择800毫秒效果相对最佳。

方案2

继续思考一开始的思路为啥出现问题。经过老大提醒,并结合千牛之前出现的css动画问题,感觉是动画结束和js控制没有达到一致。为了验证这个假设,去除setTimeout延迟,添加webkitTransitionEnd事件,并打印出每次滚动时间。

最终结果了滚动出现的问题,再查看每次滚动时间

在chrome里面查看滚动时间

结论

从结果来看在chrome里面css动画几乎没有延迟的跟设定1s过渡时间基本吻合,但是在千牛应用里面能够看出css动画会受其他条件影响,比如上面所遇到的鼠标滚动过快等因素。

所以在css动画这方面就应该用css动画事件来控制。除了过渡有且只有webkitTransitionEnd事件,动画开始webkitAnimationStart,动画结束事件webkitAnimationEnd,动画重复运动事件 webkitAnimationIteration。后面再玩玩

本文原地址 http://xiaoqiang730730.github.io/2016/06/03/fullpage/

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 7 收藏 评论

关于作者:前端-小强

前端-小强,前端工程师(微博 http://weibo.com/smallwall520),现就职于杭州光云科技。http://xiaoqiang730730.github.io博客内容包括:解决日常问题的小技巧、对一些问题的思考、以及对某些事或者某些活动的思考。 个人主页 · 我的文章 · 9 ·      

可能感兴趣的话题



直接登录
跳到底部
返回顶部