滚动插件iScroll
1.iScroll概念
- iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。
- 能让项目有滚动,缩放,平移,无限滚动,视差滚动,旋转功能。
2.iScroll基本使用
- 按照iScroll的规定搭建HTML结构
- 引入iScroll
- 创建iScroll对象, 告诉它谁需要滚动
3.iScroll的版本
针对iScroll的优化。为了达到更高的性能,iScroll分为了多个版本。可以选择最适合的版本。
- iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。
- iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
- iscroll-zoom.js,在标准滚动功能上增加缩放功能。
- iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
4.举例
css部分
// .iScrollVerticalScrollbar适用于纵向滚动条容器
.iScrollVerticalScrollbar{
width: 10px;
position: absolute;
top: 0;
right: 0;
z-index: 999;
background-color: #9c9c9c;
border-radius: 50px;
}
// .iScrollIndicator真正的滚动条指示器
.iScrollIndicator{
width: 100%;
background-color: #74ACCF;
border-radius: 20px;
}
------------------------------------------------
js部分
<script>
let myScroll = new IScroll('.box',{
mouseWheel: true,
//custom:可自定义滚动条样式 true:滚动条为默认样式
scrollbars:'custom'
});
myScroll.on("beforeScrollStart", function () {
console.log("滚动之前");
});
myScroll.on("scrollStart",function () {
console.log("开始滚动");
});
myScroll.on("scrollEnd",function () {
console.log("滚动结束");
})
</script>