zepto不支持animate({scrollTop:"100px"})的解决办法
2015-08-11 10:35
417 查看
在移动web项目的开发中,遇到一个通过点击页面自动到相应的楼层处的需求,最初的想法就是使用html的target属性进行切换,但实际效果十分死板,显得毫无交互性。该前端架构采用zepto这个轻库进行开发,它具有类似jQuery的语法,之后采用了animate({scrollTop:"100px"})这个函数进行页面的动画滚动,结果就是毫无效果。
通过查询zepto fx包的源码
发现zepto的animate()源码采用css3的方式进行,而scrollTop属性不在css3的动画属性中,所以没有生效。接下来的方法就是自己写一个滚动条上下滚动的方法。初步的代码如下:
采用原型函数的方式,制做一个scrollTo方,效果还不错~~哈哈
(PS:本菜鸟注册博客园已经有一段时间了,这还是第一次发博客记录自己的学习,希望大家请多指教~~)
通过查询zepto fx包的源码
transform = prefix + 'transform' cssReset[transitionProperty = prefix + 'transition-property'] = cssReset[transitionDuration = prefix + 'transition-duration'] = cssReset[transitionDelay = prefix + 'transition-delay'] = cssReset[transitionTiming = prefix + 'transition-timing-function'] = cssReset[animationName = prefix + 'animation-name'] = cssReset[animationDuration = prefix + 'animation-duration'] = cssReset[animationDelay = prefix + 'animation-delay'] = cssReset[animationTiming = prefix + 'animation-timing-function'] = ''
发现zepto的animate()源码采用css3的方式进行,而scrollTop属性不在css3的动画属性中,所以没有生效。接下来的方法就是自己写一个滚动条上下滚动的方法。初步的代码如下:
$.fn.scrollTo =function(options){ var defaults = { toT : 0, //滚动目标位置 durTime : 500, //过渡动画时间 delay : 30, //定时器时间 callback:null //回调函数 }; var opts = $.extend(defaults,options), timer = null, _this = this, curTop = _this.scrollTop(),//滚动条当前的位置 subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 index = 0, dur = Math.round(opts.durTime / opts.delay), smoothScroll = function(t){ index++; var per = Math.round(subTop/dur); if(index >= dur){ _this.scrollTop(t); window.clearInterval(timer); if(opts.callback && typeof opts.callback == 'function'){ opts.callback(); } return; }else{ _this.scrollTop(curTop + index*per); } }; timer = window.setInterval(function(){ smoothScroll(opts.toT); }, opts.delay); return _this; };
采用原型函数的方式,制做一个scrollTo方,效果还不错~~哈哈
(PS:本菜鸟注册博客园已经有一段时间了,这还是第一次发博客记录自己的学习,希望大家请多指教~~)
相关文章推荐
- lamp(二) apache 配置
- 配置RHEV中Linux 虚拟机使用 IPA(IDM)实现单点登录的方法
- centos 安装tkdiff
- BeanUtils.copyProperties
- Linux 阿里云挂载新分区
- document.body.scrollTop等常见易混淆属性整理
- Tomcat类加载器机制(Tomcat源码解析六)
- Nginx启动错误:error while loading shared libraries: libpcre.so.1
- linux 在bash 中的 second SECOND SECONDS
- Linux System API
- linux运维事故
- 在VS2013中 用opencv循环读取文件夹下的文件
- Apache Mahout的Taste基于Hadoop实现协同过滤推荐引擎的代码分析
- svn属性svn:keywords与auto-props的配置(运行配置区)
- 8月初.公司域名注册总量TOP15:耐思尼克落榜
- 利用Docker, 5分钟搞定graphite+slack alert
- 初级程序员应该了解的Linux命令
- 使程序能够引入.json文件, 为网站添加 MIME 映射
- sed命令在指定位置插入字符
- Centos 6.5 下安装 Matlab R2010a