iscroll

iscroll 一般用于区域滚动。

比如：头部一直固定在顶部。

然后，内容区域滚动。

H5在移动端的话， position:fixed; 很多移动端浏览器都不兼容。

position:fixed; 在移动端不兼容。

在移动端开发中，使用position:fixed; 固定定位，很多的手机都支持不好，尤其是在定位的区域还需要输入内容调取虚拟键盘的时候，会出现很多很多的问题。

解决这个问题，就不能使用固定定位了。

而使用局部滚动处理(iscroll)。 

iscroll 这个插件本身就是做局部滚动的。

 

1、首先要固定滚动区域的高度

CSS：

.content {
    position: relative; /*-- 让滚动条锁定在当前容器里面 --*/
    overflow: hidden;   /*-- 让容器是当前一屏 --*/
}

/*-- 重写iscroll滚动条样式 --*/
.iScrollIndicator {
    opacity: 0.5;
}

HTML：

<!-- content 为滚动的容器 -->
<section class="content">
    <ul>
        
    </ul>
</section>

 

JS：

//->计算content区域的高度(实现竖向局部滚动，我们首先需要把最外层容器的高度设定好)
var $content = $('.content');
/*-- 当亲屏幕的高度减去 Header 区域的高度 --*/
$content.css('height', document.documentElement.clientHeight - $('.header')[0].offsetHeight);

/*-- 处理谷歌浏览器不能滚动的问题 --*/
document.querySelector('.content').addEventListener('touchmove', function (e) {
    e.preventDefault();
});




/*-- 在数据绑定完成后实现局部滚动 --*/
/*--
1、var 实例 = new IScroll(需要局部滚动的区域, {参数配置});
scrollbars: true,  显示滚动条，默认是不显示的 (开启后，iscroll会默认的向content区域增加一个
iScrollVerticalScrollbar的DIV，这个DIV控制的是滚动条。它的样式是position: absolute;
所以如果只想让滚动条在容器中，需要给当前的容器增加 position: relative;)
mouseWheel :true, 设置支持鼠标滚轮滚动
bounce: false, 禁止运动到边界后反弹
click: true , 默认是把所有点击事件都禁止了。
iscroll为了防止滑动过程中的误操作，默认是把click禁止的，我们需要点击，则开启click即可。
myScroll.refresh: 当滚动区域的内容发生改变的时候，我们让当前的实例刷新一下，这样的话，滚动区域的相关值，都会跟着重新计算
myScroll.scrollToElement(ele, time); 用多长的时间滚动到具体的某一个元素位置。
myScroll.scrollTo(x, y, time); 滚动到具体的坐标位置
比如: myScroll.scrollTo(0, 100, 300);
myScroll.scrollTo(0, -1000, 300);

2、初始化成功后，只对当前容器中的第一个子元素实现了滚动操作
querySelector 是获得所有子元素中的第一个
querySelector('*') 是获得所有子元素的第一个
document.querySelector('.content').querySelector('*');

3、页面一打开，就滚动到最后一个元素位置
var $li = $content.find('li');
myScroll.scrollToElement($li[$li.length -1], 300);
--*/

/*-- 自定义一个方法 --*/
function fn() {
   console.log(1);
}
var myScroll = new IScroll('.content', {
   scrollbars: true,  //出现滚动条
   fadeScrollbars: true,  //滚动条滚动的时候，才显示
   mouseWheel: true,
   bounce: false,
   click: true,
   tap: fn
});

// myScroll.refresh();
// myScroll.scrollToElement();
// myScroll.scrollTo(x, y, time);

var $li = $content.find('li');
myScroll.scrollToElement($li[$li.length -1], 300);

2、iscroll在谷歌浏览器中局部滚动失效

问题所在，简单来说就是谷歌浏览器的统一指针事件所致。

那么，谷歌浏览器该如何操作移动端的iScroll.js呢？

1.代码实现（推荐）：

 //获取所需要的元素
 var jdCateLeft=document.querySelector('.jd_cateLeft');
 //取消事件默认动作
 jdCateLeft.addEventListener('touchmove',function(e){
    e.preventDefault();
 });

2.浏览器本身设置（全局关闭）  

chrome://flags/#enable-pointer-events

3.或者局部关闭：

<!-- 将这段代码放在 head 标签内 -->
<script>window.PointerEvent = void 0</script>

上面几种办法都可以解决这个问题，但是个人推荐用第1种方法。