IScroll

IScroll还是很不错的，尤其是应用在移动端，移动端body自带滚动，那么内部的列表滚动就不会那么自然，起码没有缓冲效果

记录基本使用demo


<script type="text/javascript" src='iscroll-probe.js'></script>
<style>
	html,body{
		margin:0;
	}
	ul,li{
		margin:0;padding:0;list-style: none;
	}
	.warp{
		width: 100%;
		height: 50vh;
		overflow: hidden;
		position: relative; /*用了定位后才能将滚动条相对于当前窗口而不是文档*/
	}
	ul{
		/*width: 2000px;*/
	}
	li{
		height: 74px;
		background: green;
		border: 5px solid;
		box-sizing: border-box;
		/*float: left;
		width:200px;*/
	}
</style>
<body id='body'>


		<div class="warp">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
				<li>17</li>
				<li>18</li>
				<li>19</li>
				<li>20</li>
				<li>21</li>
				<li>22</li>
				<li id="abc">abc</li>
				<li>23</li>
				<li>24</li>
				<li>25</li>
				<li>26</li>
				<li>27</li>
				<li>28</li>
				<li>29</li>
				<li>30</li>
			</ul>
		</div>

	<script>
	window.onload=function(){
		var myScroll = new IScroll('.warp', {
				mouseWheel: true,
				scrollbars: true,
				fadeScrollbars:true,
				interactiveScrollbars:true, //滚动条可拖动
				probeType: 2,  //监听位置必须要搭配这个
				// snap:true //开启分页，自动计算内容占滚动容器的多少页
				snap:'li', //以每个li作为分页，不会停留在li的一半的位置
				// scrollX: true,scrollY: false, //水平滚动
				// eventPassthrough:true,
				// freeScroll:true
		});

		//scrollStart scrollEnd...
		myScroll.on('scroll', function () {
			console.log(this.y, this.maxScrollY)
		});
		// myScroll.scrollTo(0, -74, 1000); //滚动到位置  三参是时间
		// myScroll.goToPage(0, 1, 1000); // 滚动到水平第0页 竖直的第1页 配合snap使用

		myScroll.scrollToElement('#abc',500,0,-74) //滚动到元素，时间，水平偏移，竖直偏移量
		document.addEventListener('touchmove',function(e){
			e.preventDefault()
		},false)
	}
	</script>
</body>
</html>

注意事项

1，页面在移动端滚动条移动变得非常卡，最后加上了document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);滚动条变得很流畅，并且阻止body滚动
2，关于页面在不刷新的情况下如果添加了新的模块或者高度发生了变化会导致无法下拉的情况，使用iscroll5可以解决这个问题，就是在你触发了变化的事件之后，加上myscroll.refresh(); 去调用它自带的刷新方法。
3，用了Iscroll会阻止默认行为，那么点击事件就不能使用，需要配置中加上 click:true（移动端可以借助faskClick,还解决了300ms延迟问题）加了 click：true的话注意表单将无效
4，a标签等不能跳转的问题，可以修改源码
- preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }
3，indicators是个好东西，参考官网demo:minimap 和parallax

2017-08-15