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

相关文章

使用Apache Flink进行流处理

如果在你的脑海里,“Apache Flink”和“流处理”没有很强的联系,那么你可能最近没有看新闻。Apache Flink已经席卷全球大数据领域。现在正是这样...

1952
来自专栏生信宝典

network3D 交互式网络生成

networkD3是基于D3JS的R包交互式绘图工具,用于转换R语言生成的图为交互式网页嵌套图。目前支持网络图,桑基图,树枝图 (后续相继推出)等。 关于网络图...

2645
来自专栏项勇

笔记46 | Android性能优化之优化layout的层级(一)

1877
来自专栏北京马哥教育

一致性hash原理与实现

一、背景介绍 memcached的分布式 memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能。服务器端内存存储功能,其实现非常简单。...

3237
来自专栏全沾开发(huā)

项目结构——JavaScript版本的2048实现[0]

项目结构——JavaScript版本的2048实现[0] 最近在看一本书《HTML5 Canvas开发详解》 看到了一定程度,打算找...

3436
来自专栏Albert陈凯

# Hadoop离线数据分析平台实战——230项目数据存储结构设计Hadoop离线数据分析平台实战——230项目数据存储结构设计

Hadoop离线数据分析平台实战——230项目数据存储结构设计 数据存储设计 在本次项目中设计到数据存储的有三个地方: 第一个就是将原始的日志数据按天保存到h...

34911
来自专栏编程

也许 vue+css3 做交互特效更简单

1.前言 做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用 ,开发技术栈方面,理所当然就使用了 + 开发,过程中发现使用 + 开发特效,和 / ...

17710
来自专栏数据和云

Oracle In-Memory Option的细节

在OOW大会之后,Oracle In-Memory Option这一数据库选件的细节被更多的公布出来。我选取一点信息和大家分享。 In-Memory Optio...

2729
来自专栏web编程技术分享

sql实现简单自增长

3056
来自专栏owent

C++总是很神奇

很多时候看到C/C++的一些奇妙的应用,每次都是惊奇一点时间就随风飘过了 现在我还是决定记录一下这些有意思的东西。

712

扫描关注云+社区