iscroll的参数和方法说明
http://blog.csdn.net/sweetsuzyhyf/article/details/44195549
iscroll的初始化
- 最佳的HTML结构：
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
- 只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。
- 初始化
var A=new IScroll('#id',{
scrollbars:true,//显示滚动条（默认是false不显示）
mouseWheel:true,//支持鼠标触发区域滚动
bounce:true,//取消达到边界的缓冲效果
})
注：注意事项和一些坑
- 首先容器要有一个固定的高度，并且内容的高度要比容器高度要高才能实现滚动。
- 如果在配置文件中设置scrollbars:true就会给当前容器一个元素庸才盛放滚动条，需要让滚动条相对于容器定位，所以当前的容器需要定位relative/absolute
- 更改滚动条的样式 $('.isScrollIndecator').css(......)
- 当容器的内容或者高度发生改变的时候需要刷新iscroll
setTimeout(function(){//放在计时器里边才好使，不然容易出错
A.refresh();
},0)
- 当容器处于display：none的情况下初始化iscroll是会报错的，应定要先显示容器，再初始化;
6.最保险的方式是在window的onload事件中启动它
iscroll的常用配置及API
配置
mouseWheel: true,//允许鼠标滚动
scrollbars:true//显示滚动条
bounce:true//反弹动画
click:true//允许容器内元素能绑定点击事件
disableMouse: true,//禁用鼠标
scrollX:true,//横向可以用
scrollY:true,//纵向可以使用
startX:0//X方向滚动的起始位置
startY:0//X方向滚动的起始位置
API
在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。
myScroll.destroy();//销毁iscroll
myScroll = null;//清空引用
滚动的原生方式
1. 回到顶部效果
- 动态改变页面的scrolltop值
var during=500,interval=10,target,step;
target=document.documentElement.scrollTop||document.body.scrollTop;
step=target/during*interval;
var timer=setInterval(function(){
if(target<=0){
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
window.clearInterval(timer);
return;
}
target-=step;
document.documentElement.scrollTop = target;
document.body.scrollTop = target;
},interval)
2. 元素内部滚动
- 可以连续滚动也可以滚动到终点后停止
var curLeft=ele.offsetLeft;
var timer=setInterval(function(){
curLeft-=1;
if(curLeft<=-ele.offsetWidth){
return;
}
ele.style.left=curLeft+'px';
},10)
3. 鼠标滚动换页 类似于swiper的效果
监听手指上滑还是下滑 ： http://www.swiper.com.cn/demo/090-vertical.html
监听鼠标上滑还是下滑
(function(){
function addWheel(ele,fn){
function fnWheel(e){
//fnWheel这个函数中，是用来检测鼠标滚轮的方向；--bOk;
e=e||window.event;
var bOk=false; //想让这个布尔值，true：down； false：up
if(e.wheelDelta){//chrome/IE
bOk= e.wheelDelta<0?true:false; //down:true; up:false;
}else{//firefox
bOk= e.detail>0?true:false; //down:true; up:false;
}
//判断bOk;
fn&&fn.call(ele,bOk); //回调函数被调用，传参，改变this指向；
//阻止默认事件
e.preventDefault?e.preventDefault(): e.returnValue=false;
}
//当鼠标滚轮这个行为被触发的时候，要干fnWheel里面的事情；
if(navigator.userAgent.toLowerCase().indexOf('firefox') !==-1){//Firefox
ele.addEventListener('DOMMouseScroll',fnWheel,false);
}else{
ele.onmousewheel=fnWheel;
}
}
window.wheel=addWheel;
})();
滚动到指定位置或元素的几种方式
- scrollIntoView();原生H5的方法(直接到，没有过渡动画) 最简单有效的方式
- ele.scrollIntoView(ture)元素上边框与视窗顶部齐平（默认的是true）
- ele.scrollIntoView(false)元素下边框与视窗底部齐平 (一般选用这个)
- TIPS：页面（容器）可滚动时才有用！
- 来自于iscroll插件的scrollToElement() 方法写在一个计时器中
- 引用：http://blog.csdn.net/liangklfang/article/details/52804915
- 用法： myScroll.scrollToElement(el, time, offsetX, offsetY, easing)
- 示例：
setTimeout(function(){
myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))
},0)
- 来自于iscroll插件的 scrollTo(x, y, time, easing)
- 滚动到相对于当前位置的某处
- 示例：
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
- scrollTo() 方法可把内容滚动到指定的坐标。（原生方法）
window.scrollTo(100,500) //window.scrollTo(x,y)
- 元素相对父元素定位，bottom：0，并且向子元素插入内容
- 能够实现元素向上滚动，但元素不能再滚动。
- 前提：子元素高度超出父元素
