移动端框架 滚动类 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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2577
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2182
来自专栏魂祭心

原 canvas绘制clock

4104
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5476
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

4667
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2546
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6848
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310

扫码关注云+社区