hyhc-scroll v1.0.19
移动端下拉刷新插件
使用原生 JS 编写的模仿滚动效果的插件，支持 UMD 规范，使用 CSS3 的变换（transfrom）做为滚动条的移动方式， 过渡（transition）做为滑动效果的实现，能够使用带特定浏览器前缀(webkitTransform)版本的 CSS3 样式。
拥有以下功能：
- 下拉刷新列表
- 上拉加载数据
- 滑动效果
- 滚动到边界时的回弹效果
- 加载完全部数据后的提示
- 一些预置的样式
此外，还开放了一些 API 让使用者可以自行操作滚动位置。
引入插件
非模块化开发时，需要在页面上引用 hscroll.js 与 hscroll.css ：
<script src="hscroll.js"></script>
<link rel="stylesheet" href="hscroll.css">之后，插件会在 window 上注册一个变量 window.HScroll。
模块化开发时(如：webpack)，先通过 NPM 安装本插件，然后在JS中引用模块：
var HScroll = require('@hyhc/scroll');而样式，可在源文件(less、sass、stylus)中通过 @import 指令引用：
@import '/node_modules/@hyhc/scroll/hscroll.css';由于本插件已经将图片以 base64 形式写入样式文件，因此不再需要其他操作。
基本使用
本插件需要一些基本的 html 结构，在使用插件的地方加入如下的 html：
<!-- 第一层做为滚动容器，大小默认和父元素一样大 -->
<div id="wrapper" class="h-scroll">
<!-- 第二层做为实际在滚动的元素，其 overflow 为 hidden，请不要重写此样式 -->
<div class="h-scroll-wrapper">
<!-- 第三层用于放置滚动溢出时所显示的‘下拉刷新’等内容，插件会动态生成一些元素 -->
<div class="h-scroll-content">
<!-- 这里放你的列表项 -->
</div>
</div>
</div>初始化：
var hscroll = new HScroll(document.getElementById('wrapper'), {
onRefresh: function(done){
//列表刷新时的回调函数
//在插件初始化时，会直接被调用，以加载第一页数据
//参数 done ，是一个函数，用于通知插件数据已经加载完成
$.ajax(/* 一些参数 */)
.then(function(result){
//TODO: 渲染列表
//done 函数有一个参数，用于表示列表数据是否全部加载完成
//用于为用户显示一个提示
done(false);
});
},
onLoad: function(done){
//列表在加载下页数据时的回调函数
//用于和 onRefresh 类似
}
});插件选项
onRefresh: 列表刷新时的回调函数，有一个 done 参数，用于通知插件数据已经加载完成。
onLoad: 列表在加载下页数据时的回调函数，有一个 done 参数，用于通知插件数据已经加载完成。
createTip: 用于自定义‘已加载全部数据’的提示信息，使用方式如下：
new HScroll(document.getElementById('wrapper'), {
//...其他选项
createTip: function(container){
//container 是放置提示的容器元素，直接为该元素添加内即可
container.textContent = '已加载全部数据'
}
})插件API
getCurrentPosition(): 获取当前滚动条位置，与原生的 scrollTop 不一样的是，它一般是一个负数。
scrollTo(y, time, callback): 滚动到指定的位置 参数说明：
scrollToTop(time, callback): 滚动到顶部
scrollToBottom(time, callback): 滚动到底部
scrollToNextPage(time, callback): 滚动到下一屏
scrollToPrevPage(time, callback): 滚动到上一屏