iscroll插件和关于滚动的问题

原文地址: https://www.jianshu.com/p/e952eeca1160

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,//取消达到边界的缓冲效果
})

注：注意事项和一些坑

1. 首先容器要有一个固定的高度，并且内容的高度要比容器高度要高才能实现滚动。
2. 如果在配置文件中设置scrollbars:true就会给当前容器一个元素庸才盛放滚动条，需要让滚动条相对于容器定位，所以当前的容器需要定位relative/absolute
3. 更改滚动条的样式 $('.isScrollIndecator').css(......)
4. 当容器的内容或者高度发生改变的时候需要刷新iscroll

setTimeout(function(){//放在计时器里边才好使，不然容易出错
  A.refresh();
},0)

1. 当容器处于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;
})();

滚动到指定位置或元素的几种方式

1. scrollIntoView();原生H5的方法(直接到，没有过渡动画) 最简单有效的方式

• ele.scrollIntoView(ture)元素上边框与视窗顶部齐平（默认的是true）
• ele.scrollIntoView(false)元素下边框与视窗底部齐平 (一般选用这个)
• TIPS：页面（容器）可滚动时才有用！

1. 来自于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)

1. 来自于iscroll插件的 scrollTo(x, y, time, easing)

• 滚动到相对于当前位置的某处
• 示例：

myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);

1. scrollTo() 方法可把内容滚动到指定的坐标。（原生方法）

window.scrollTo(100,500)  //window.scrollTo(x,y)

1. 元素相对父元素定位，bottom：0，并且向子元素插入内容

• 能够实现元素向上滚动，但元素不能再滚动。
• 前提：子元素高度超出父元素