iscroll

iscroll 通常用于区域滚动。javascript

好比：头部一直固定在顶部。css

而后，内容区域滚动。html

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

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

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

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

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

iscroll 这个插件自己就是作局部滚动的。code

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

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();
});




/*-- 在数据绑定完成后实现局部滚动 --*/
/*--
一、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);

二、初始化成功后，只对当前容器中的第一个子元素实现了滚动操做
querySelector 是得到全部子元素中的第一个
querySelector('*') 是得到全部子元素的第一个
document.querySelector('.content').querySelector('*');

三、页面一打开，就滚动到最后一个元素位置
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);

二、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种方法。