IScroll(局部滚动)（9-5）

移动端

前情提要

  • [x] position:fixed不能用作移动端固定首部
  • 在移动端开发中,使用position:fixed固定定位,pc端IE6不兼容，移动端很多都兼容
  • 尤其是在定位的区域需点击或需调取虚拟键盘会出现问题
  • [ ] 处理：使用局部滚动处理(ISCROLL)

步骤

  • [x] 引入iscroll.js
1
<script charset="utf-8" type="text/javascript" src="js/iscroll-5.1.3.min.js"></script>

  • [x] 绑定数据之前：计算滑动区域content的高度

    • 实现竖向局部滚动,首先需要把最外层容器的高度设定好

      1
      $content.css('height', document.documentElement.clientHeight - $('.header')[0].offsetHeight);

  • [x] 在数据绑定之成：实现局部滚动

1
2
3
4
5
6
7
8
var myScroll = new IScroll('.content', {
                scrollbars: true,
                fadeScrollbars: true,
                mouseWheel: true,
                bounce: false,
                click: true
            });
    myScroll.refresh()

IScroll的设置与方法

  • [x] 初始化实例

    • 初始化成功后，只对当前容器中的第一个子元素实现了滚动操作
      1
      var 实例=new IScroll ( 需要局部滚动的区域 , { 参数配置 } )

  • [x] 设置

    • [ ] scrollbars: true 显示滚动条,默认不显示
    • (开启后,默认的向content区域增加一个控制滚动条的div(class=iScrollVerticalScrollbar。它的样式是position: absolute;所以如果只想让滚动条在容器中，需要给当前的滚动条增加position: relative;)
    • [ ] mouseWheel：true 设置支持鼠标滚轮滚动
    • [ ] bounce:false 禁止运动到边界后反弹
    • [ ] click: true ISCROLL为了防止滑动过程中的误操作,默认是把click禁止的,如果需要点击,则开启click即可

  • [x] 方法

    • [ ] myScroll.refresh() : 当滚动区域的内容发生改变的时候,让当前的实例刷新一下,滚动区域的相关值都会跟着重新计算

    • [ ] myScroll.scrollToElement([ele],[time]) : 用多长的时间滚动到具体的某一个元素位置

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

    • [ ] myScroll.scrollTo(x,y,time) : 滚动到具体的坐标位置

      1
      myScroll.scrollTo(0, -1000, 300);