设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

iScroll v4.2.2修改源码解决阻止浏览器自身滚动

2015-5-15 22:51| 发布者: joejoe0332| 查看: 1929| 评论: 0|原作者: gbtags.com|来自: gbtags.com

摘要: iScroll 是非常常用的一个开发移动版页面的插件,但是在使用过程中我们发现如果在页面的局部区域使用了iScroll,那么在这个区域不管怎么滑动,iScroll区域可以滑动但是整个页面却是不会滑动了的,查看源码可以发现iS ...

 iScroll 是非常常用的一个开发移动版页面的插件,但是在使用过程中我们发现如果在页面的局部区域使用了iScroll,那么在这个区域不管怎么滑动,iScroll区域可以滑动但是整个页面却是不会滑动了的,查看源码可以发现iScroll的bug所在Default options中

  1. onBeforeScrollStart: function (e) { e.preventDefault(); },

 问题就出在这里,源码在滚动前,不管三七二十一就把一切相关的浏览器默认动作都阻止了,那这里可以修改为

  1. onBeforeScrollStart:null,

 

但是需求是多变的,可能有时要阻止一切,有时就需要它像PC中div部分区域出现滚动条时似的(当滚轮把div滚动到底部时候,浏览器的滚动条才开始滚动),这时添加一个Default options变量edgeRestorePrevent默认值null

  1. edgeRestorePrevent: null,

该变量控制是否iScroll滑倒边缘时触发浏览器默认动作。

 

还要在 iScroll.prototype添加两个iScroll私有变量

  1. isTop:false,
  2. isBottom:false,

 然后在私有的_start方法里的最开始位置定义完变量后添加

  1. that.isTop = that.y == that.minScrollY;
  2. that.isBottom = that.y == that.maxScrollY;

 _move方法里最开始位置定义完变量后添加

  1. if (((that.isTop && deltaY > 0) || (that.isBottom && deltaY < 0)) && that.options.edgeRestorePrevent) {
  2. return;
  3. } else {
  4. e.preventDefault();
  5. }

 至此大功告成!调用时只要把edgeRestorePrevent变量设置为true即可

  1. new iScroll("domID", {
  2. checkDOMChanges: true,
  3. edgeRestorePrevent: true
  4. })

 如果还没有看懂就直接下载我的附件素材查看吧,附件素材里的iScroll的注释中标注@dyh的部分就是修改过源码的地方。

PS:如果直接用的话记得把Zepto改成jQuery


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部