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. hdu4686 Arc of Dream ——构造矩阵+快速幂

    link: http://acm.hdu.edu.cn/showproblem.php?pid=4686 构造出来的矩阵是这样的:根据题目的ai * bi = ……,可以发现 矩阵1 * 矩阵3 = ...

  2. Android项目——读取手机联系人信息

    加入读取联系人信息的权限 <uses-permission android:name="android.permission.READ_CONTACTS"/> cont ...

  3. Android stuido viewpagerindicator的使用

    Top Level Build.gradle buildscript { repositories { maven { url "http://dl.bintray.com/populov/ ...

  4. oracle控制文件丢失恢复

    在学习群里有个同学误删除了控制文件,于是我也把自己数据库的控制文件删除了,看看能不能进行恢复,以下是整个实验的过程~~在做之前,先看看控制文件的备份方式:1.生成可以重建控制文件的脚本.2.备份二进制 ...

  5. Oracle Commit 方式 COMMIT WRITE batch NOWAIT;

    1111 CREATE OR REPLACE PROCEDURE update_hav_tpnd IS  CURSOR hav_tpnd_cur IS    SELECT d.hav_tpnd, d. ...

  6. 黑马程序员_ C语言基础(一)

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------ 开发过程: 编写->编译(只编译源文件,编译成*.o  只会检测语法是否合理,不会检测函数是 ...

  7. InnoDB: Error number 24 means ‘Too many open files’.--转载

    一.问题的描述 备份程序 执行前滚的时候报错.(-apply-log) InnoDB: Errornumber 24 means 'Too many open files'. InnoDB: Some ...

  8. CentOS的安装与克隆

    CentOS的安装与克隆 环境说明 win7 x64位:VMware12:CentOS-6.5-x86_64-minimal 安装与初始配置 安装 在WM主页--“创建新的虚拟机”--自定义--... ...

  9. Search history in "Maps"

    A friend of mine came to me with her iPhone yesterday. She wanted to know how to clear search histor ...

  10. tomcat的乱码问题

    String filename=request.getParameter("filename"); filename=new String(filename.getBytes(&q ...