关于isScroll如何使用
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如何使用的更多相关文章
- 判断是否滚动加载结束 用一个公共变量isScroll来控制
如果还没达到最大页数,isScroll就一直是不变,ajax正常进行.如果达到最大页数,就不执行ajax操作了...
- isScroll 插件在iPhone 5s 和以上版本
才加入这个移动项目组三天,解决一个同事(请假),解决一个切换头部tab 选型时,下拉数据,再次切换到另外一个选项时,出现滚动条距离顶部有些距离,当频繁操作会出现距离顶部距离加大问题(第二天衍生出其他b ...
- 移动端 isScroll自定义实现
var scroll_flag=null;var goodNum = 11;var i_c = 0;function loadInsuranceList(){ //这里写滚动出来 加载的数据$.aja ...
- isScroll代码
html: <div class="wrap"> <div class="content"> //内容-必须为第一个子元素 </d ...
- isScroll的滚动组件的用法
<div class="wrapper"> <ul> <li>1</li> <li>2</li& ...
- isscroll插件 实现下拉加载 上啦刷新 转
http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <m ...
- web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决
[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...
- LigerUI一个前台框架增、删、改asp.net代码的实现
先上代码:前台代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- android 入门-防微信拍摄视频 按钮事件处理
package com.cc.view; import com.cc.R; import com.cc.R.layout; import com.cc.R.menu; import android.o ...
随机推荐
- POJ-3261 Milk Patterns(后缀数组)
题目大意:找出至少出现K次的子串的最长长度. 题目分析:二分枚举长度x,判断有没有最长公共前缀不小于x的并且连续出现了至少k次的有序子串区间. 代码如下: # include<iostream& ...
- .net framework 4.0 从 GAC 卸载 程序集
.net framework 4.0 的 GAC 目录: C:\Windows\Microsoft.NET\assembly\GAC_MSIL 要卸载,仍然使用 gacutil 命令,不要带扩展名: ...
- python 模块openpyxl读excel文件
使用openpyxl模块来读取excel.要注意openpyxl读不再支持旧的xls格式. 先看一下操作前的excel是什么样子吧.对了,现在只支持xlsx格式的excel读取 我现在想在第三行插入3 ...
- Vmware vsphere webservice sdk 连接打开慢的问题
还在为VimService实例化速度慢的问题烦恼吗?这有一篇文章可以帮你解决问题,英文水平所限,就不翻译了,原文地址http://kb.vmware.com/selfservice/microsite ...
- Google 的开源技术protobuf 简介与例子
本文来自CSDN博客:http://blog.csdn.NET/program_think/archive/2009/05/31/4229773.aspx 今天来介绍一下"Protocol ...
- SSAS处理时“找不到属性键”的解决办法 (转载)
在SSAS中,经常会遇到“Attribute key not found(找不到属性键)”的错误,这种错误通常是由于某个维度属性(Dimension Attribute)的数据没能从Sql Serve ...
- ES6 Set和Map
一.Set遍历方法: set.key() set.values() set.entries() 二.Set例子: var s = new Set(); var arr = [1,1,2,3,6,8,8 ...
- 一个可以设置所有子控件是否可以点击的Layout的实现
http://www.cnblogs.com/csonezp/p/4956315.html 最近在做一个功能,想在某个状态设置整个界面不可点击,后台任务执行完毕后再可以点击. 最直观的想法是直接让所有 ...
- MapReduce编程job概念原理
在Hadoop中,每个MapReduce任务都被初始化为一个job,每个job又可分为两个阶段:map阶段和reduce阶段.这两个阶段分别用两个函数来表示.Map函数接收一个<key,valu ...
- web页面打开本地app(判断是否安装)
在应用宝中有APP申请链接: //是否可以打开App不可以跳则到下载页 $(".downNow button").on("click",function(){ ...