MUI Scroll插件(滚动)

scroll(区域滚动)

在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题:
Android平台4.0以下不支持div滚动
Android平台4.0以上支持div滚动,但不显示滚动条
弹出层的div滚动在iOS平台存在事件透传的问题
1.因此,mui额外提供了区域滚动组件,使用时需要遵循如下DOM结构

<div class="mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--这里放置真实显示的DOM内容-->
  </div>
</div>

2.js设置:

mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006 
});

常用scroll功能代码:

1.快速回滚到该区域顶部,代码如下:
scrollTo每次移动的距离,是相对于当前的距离来移动的,而不是移动到绝对的距离。

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

滚动到顶部的代码比较容易实现,坐标值设为0、0即可;但滚动到底部,需要计算该区域的实际高度,因此mui封装了scrollToBottom方法。

mui('.mui-scroll-wrapper').scroll().scrollToBottom(100);//100毫秒滚动到底部

2.快速滑动demo:
scrollTo每次移动的距离,是相对于当前的距离来移动的,而不是移动到绝对的距离。所以通常的做法是根据当前的位置 - 将要抵达的位置,求出距离然后再进行移动,如以下的demo:

var index = $(e.event.target).index();
  var id = $(e.event.target).attr("href");
  var top = $(id).offset().top - 200; 
  var current_top = mui('#segmentedControlContents .mui-scroll-wrapper').scroll().y;
  top = current_top - top;
  mui('#segmentedControlContents .mui-scroll-wrapper').scroll().scrollTo(0,top,300);
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,234评论 3 119
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,194评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,880评论 1 45
  • 现在,一个小村官也被上着做! 理想?不得而知,不知情,也不想之情! 微信群不是也有官员吗?除了群主,就她官大!她可...
    乌峰阅读 235评论 0 0
  • 转载请注明本文的出处@TEASON 这两个很常用 , 很有用 ,也比较有意思开门见山 1.获取当前view 判断v...
    TEASON阅读 2,887评论 0 6

友情链接更多精彩内容