iTakeo

移动端模拟滚动。

移动端模拟滚动(支持PC端高级浏览器),支持横向和竖向滚动。

DOM结构如下:

<div class="wrap">
    <div class="content">
        //内容-必须为第一个子元素
    </div>
</div>
//如果需要横向滚动,标签写上x属性即可
<div class="wrap" x >
    <div class="content">
        //code
    </div>
</div>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

JS调用接口:

//传入元素的id或者class
var s = new iScroll('.scrollWrap');
s.top(function(a){
    //达到顶部执行,this为当前dom,a代表移动的距离
});
s.bottom(function(a,b){
    //达到底部执行,this为当前dom,a代表移动的距离,b代表总的滑动距离
});
s.resize(); //用于添加内容或者自适应的时候,重新计算滚动条高度 
01.
02.
03.
04.
05.
06.
07.
08.
09.

看个例子,默认滚动:

1

2

3

4

5

6

7

8

横向滚动:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

上拉加载:

1

2

3

4

5

6

7

8

上拉加载

下拉加载:

1

2

3

4

5

6

7

8

下拉加载

模仿订餐页面:

  • 特色套餐
  • 主食
  • 菜品
  • 家常菜
  • 葡萄酒
  • 特色套餐
  • 主食
  • 菜品
  • 家常菜
  • 葡萄酒
  • 特色套餐
  • 主食
  • 菜品
  • 家常菜
  • 葡萄酒
  • 特色套餐
  • 主食
  • 菜品
  • 家常菜
  • 葡萄酒
  • 特色套餐
  • 主食
  • 菜品
  • 家常菜
  • 葡萄酒
  • 特色套餐
  • 主食
  • 菜品
  • 家常菜
  • 葡萄酒
  • 特色套餐
  • 主食
  • 菜品
  • 家常菜
  • 葡萄酒
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称1
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称
菜品名称

点击弹窗内容滚动:

点击关闭

点击跳转链接

2

3

4

5

6

7

8

点击这里下载JS

2016/05/16 0 / /
标签:  暂无标签

验证码: 2 + 9 =

回到顶部