isScroll是用原生javascript写的实现局部滚动的一个库,它不依赖任何第三方库。设计的初衷是为了解决移动webkit系浏览器的区域滚动问题,兼容safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。现已更新到isScroll5.

我们采用官网(http://iscrolljs.com/)推荐的html结构来举例:

 <div class="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>

下面是对应的css部分:

.wrapper{
position:relative; //这个属性必须写,可以为relative或absolute。原因见js部分
margin:50px auto; //上下50px的margin, 水平居中
height:650px; //必须设定scrollbar容器的高度,只有当内容高度超过容器高度的时候,才会显示scrollbar
width:200px;
overflow:hidden; //当父容器高度不足时,只有通过滚动条才能看到超出的内容
background:#eee;
}
ul{
margin:;
padding:; //去掉ul默认的样式
list-style:none;
} ul li{
border:1px solid #ccc;
height:50px;//所有的li高度加起来超过650px,即容器的高度时候,才会出现滚动条
width:100%;
}

在js代码中,首先要创建一个实例:

window.onload = function(){
var myScroll = new IScroll(".wrapper",{
mouseWheel:true, //侦听鼠标滚轮事件
scrollbars:true, //是否显示默认的滚动条
 }) }

在这里,用的是onload事件,就这个例子来说,使用DOMContentLoaded也是可以的。但是,正如官网中所描述的,如果滚动区域里包含图片等,使用DOMContentLoaded事件,就会在图像等元素还没有加载之前执行了滚动条的初始化代码,scrollbar的计算就会不准确。

CSS部分留了一个问题:为什么容器要用position:relative呢?原因是在初始化的配置里,scrollbars为true,默认地,就在.wrapper所对应的元素后面添加一个子元素(appendChild)作为滚动条,而滚动条需要相对于容器定位。所以,如果不给父容器写定位,滚动条就不会出现。

上面的步骤完成后,就出现一个带着滚动条的列表区域了。但是当缩放窗口大小的时候,.wrapper所对应的区域也应该随着缩放。这部分逻辑用window的resize事件完成。

var oHeight = oWrap.innerHeight();//innerHeight是内容的height加上padding值
$(window).on("resize",scrollRefresh);//window的resize被触发,就执行scrollRefresh方法 function scrollRefresh(){
var curHeight = $(window).innerHeight()-parseFloat(oWrap.css("marginTop"))*2;//区域当前的高度=可视区域高度-上下margin
curHeight=curHeight>oHeight?oHeight:curHeight;//当窗口恢复正常大小时,容器高度不会超过原来的高度
oWrap.css("height",curHeight);
myScroll.refresh();//重绘.wrapper区域,包括计算包装器和滚动条的尺寸
}

大部分的功能已经实现了,但是还有一个问题。如果可视区域比较小,.wrapper因为被遮挡而不能滑动到底部,也就是看不到底下的内容。我自己想到的一个解决方案是在window.onload完成的时候,首先执行一遍scrollRefresh方法,获取可视区域的高度,根据可视区域的大小设置滚动

部分的位置和尺寸。

完整的代码请见: https://github.com/yinggeABC/kanbisai/blob/master/isScrollDemo.html

关于isScroll如何使用的更多相关文章

  1. 判断是否滚动加载结束 用一个公共变量isScroll来控制

    如果还没达到最大页数,isScroll就一直是不变,ajax正常进行.如果达到最大页数,就不执行ajax操作了...

  2. isScroll 插件在iPhone 5s 和以上版本

    才加入这个移动项目组三天,解决一个同事(请假),解决一个切换头部tab 选型时,下拉数据,再次切换到另外一个选项时,出现滚动条距离顶部有些距离,当频繁操作会出现距离顶部距离加大问题(第二天衍生出其他b ...

  3. 移动端 isScroll自定义实现

    var scroll_flag=null;var goodNum = 11;var i_c = 0;function loadInsuranceList(){ //这里写滚动出来 加载的数据$.aja ...

  4. isScroll代码

    html: <div class="wrap"> <div class="content"> //内容-必须为第一个子元素 </d ...

  5. isScroll的滚动组件的用法

    <div class="wrapper">  <ul>     <li>1</li>     <li>2</li& ...

  6. isscroll插件 实现下拉加载 上啦刷新 转

    http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <m ...

  7. web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决

    [问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...

  8. LigerUI一个前台框架增、删、改asp.net代码的实现

    先上代码:前台代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  9. android 入门-防微信拍摄视频 按钮事件处理

    package com.cc.view; import com.cc.R; import com.cc.R.layout; import com.cc.R.menu; import android.o ...

随机推荐

  1. MongoDB学习笔记三:查询

    MongoDB中使用find来进行查询.查询就是返回一个集合中文档的子集,子集合的范围从0个文档到整个集合.find的第一个参数决定了要返回哪些文档,其形式也是一个文档,说明要执行的查询细节.空的查询 ...

  2. Python copy and deepcopy

    Python中的对象之间赋值时是按引用传递的,如果需要拷贝对象,需要使用标准库中的copy模块. 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deep ...

  3. 如何设置UNIX/Linux中新创建目录或文件的默认权限

    在unix或者linux中,每创建一个文件或者目录时,这个文件或者目录都具有一个默认的权限,比如目录755,文件644,那么这些默认权限是怎么控制的呢? 答案是"umask"权限掩 ...

  4. jquery获得图片的真实大小

    $(function(){ var imgSrc = $("#image").attr("src"); getImageWidth(imgSrc,functio ...

  5. POJ1229 域名匹配

    给你两个域名,域名中包含一些通配符. * :匹配一个或任意多个部分 ?:匹配一个或三个部分 !:匹配三个以上部分. 求这两个域名是否能够表示同一个域名? 域名的长度不超过255. 分析:设给出的域名为 ...

  6. 数据库&数据仓库

    数据仓库的定义: 世界公认的数据仓库概念创始人W.H.Inmon在<数据仓库>(Building the Data Warehouse)一书中对数据仓库的定义是:数据仓库就是面向主题的.集 ...

  7. .NET:序列化和反序列化

    .NET:序列化和反序列化 需要反序列化的字符串: { "LouPanID": "sample string 1", "LouPanHao" ...

  8. php url编码解码

    urlencode 函数编码 urldecode 函数解码

  9. Linxu 安装Scala

    在安装Scala的时候遇到以下错: Exception in thread "main" java.lang.NoClassDefFoundError: scala.tools.n ...

  10. 自动improt的xcode插件 Auto-Importer

    https://github.com/lucholaf/Auto-Importer-for-Xcode