移动端框架 滚动类 iScroll5

HTML5学堂:移动端开发中,经常遇到需要模拟APP的效果header或是footer固定住,里面的内容区域实现滚动。但是对低端手机单纯使用CSS是兼容不了,需要JavaScript的支持。本文讲解了使用iScroll5的使用方法,解决了固定高度的容器内滚动内容。

iscroll诞生的意义

之所以iscroll会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。

  position:fixed在ios和android的使用,而ios4(4以及以前)系统以及以前的安卓系统(2.3及以前)并不支持position:fixed。这个问题可以使用iScroll框架进行解决。

  之前一直都在使用iScroll4.0版本,后来查到iScroll5已经比较稳定了(即度过了“测试版”),于是转到了5这个版本上,不过~iScroll5和iScroll4的差别有些大,包括语法都发生了很大的变化~

基本的结构要求

使用iScroll这个脚本库时,DOM树的结构要足够简单,移除不必要的标签,尽量避免过多的标签嵌套使用。

如果希望ul中的内容发生滚动,需要在外层添加一层,同时将iScroll的功能添加到最外层上。官方给出的demo结构为:

<div id="wrapper">
   <ul>
       <li>...</li>
       <li>...</li>
       ...
   </ul>
</div>

iScroll的实例化(与iScroll4版本有所区别,需注意):

var myScroll = new IScroll('#wrapper');

i改成了大写。后面的目标由原来的只能是DOM对象或者id改成可以支持DOM对象和选择器选择

官方建议在window.onload之后使用,如果使用$(document).ready也可以,但是需要能够获取到滚动区域的高度或宽度。为滚动区域增加position:relative或者absolute,能够解决大部分尺寸计算上的问题。

iScroll功能配置 —— 通过第二个参数进行滚动功能的相关设置

   var myScroll = new IScroll('#wrapper', {
       mouseWheel: true,
       scrollbars: true
   });

事件的绑定:仿造jquery的on绑定事件的方式

element.addEventListener('tap', doSomething, false); // 原生
$('#element').on('tap', doSomething); // jQuery

一些常用方法:

zoom(scale, x, y, time) 放大和缩小

refresh方法 —— 在DOM树发生变化时,应该调用此方法

scrollTo(x, y, time, easing) 滚动到某个位置

scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素

offsetx和offsety定义像素偏移,这样你可以滚动到元素加上一个指定的偏移量

easing 的具体方法被放置在了 IScroll.utils.ease当中,包含:quadratic, circular, back, bounce, elastic

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 工具提示 顶

工具提示卡的目标可以是任何元素,例如按钮,输入,链接等。目标也可以是help_outline图标,其充当实际目标的代理。

982
来自专栏前端黑板报

小程序--Canvas文字居中

注意红色划线的解释:对齐方式是以 X 的值为基点,然后在看看官网的 setTextAlign 最下面的图:

2382
来自专栏Java成神之路

博客园_01_为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html

832
来自专栏木头编程 - moTzxx

wx.navigateTo 跳转页面失败?

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1271
来自专栏王磊的博客

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言:   目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片...

44214
来自专栏数据小魔方

动态图表系列6|列表框(offset函数)

今天跟大家分享动态图表系列6——列表框(offset函数)! 具体步骤与前一篇相同: 插入列表框制作选择菜单; 使用offset函数返回动态数据源; 插入图表。...

3175
来自专栏从零开始学自动化测试

Selenium2+python自动化28-table定位

前言 在web页面中经常会遇到table表格,特别是后台操作页面比较常见。本篇详细讲解table表格如何定位。 一、认识table 1.首先看下...

2767
来自专栏不止是前端

Vue:父子组件信息传递

3648
来自专栏Java成神之路

为博客园添加目录的方法总结

参考链接: http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblog...

1132
来自专栏web前端-

浏览器对象BOM

      2 window的属性和方法:window.属性 和window.方法  (可省略window对象)

1083

扫码关注云+社区