WEB App----最近在写一个移动端滑动功能，说下爬坑经历

使用 iscroll 写移动端滑动功能的时候遇到了前人留下的问题：

在pc上使用正常，一旦换成手机（包括浏览器里的模拟手机）就会出现划不动，或者滑一次动一点的情况，首先呢这种情况肯定是iscroll 没有正常运行，但是什么造成的呢，经过我；两天研究才知道，在移动端的默认的滑动没有阻止掉，所以呢只要吧移动端的默认事件（滑动事件）阻止掉就ok了。但是问题又来了，该怎么阻止呢！下面看代码：

 

首先引入依赖的 iscroll.js 

<script src="js/iscroll.js"></script>

然后 iscroll.js 配置

<script>
    $(function() {
		//菜单框架自动获取高度
		var doc_H = $(document).height();
		$('.Menu_box').height(doc_H);
		window.onresize = function() {
			var doc_H = $(document).height();
			$('.Menu_box').height(doc_H);
		}
		var myScroll_left;
		var myScroll_right;
	})
//-------------------------------------------------------
//--------------------这一部分是我自己项目的配置项无关紧要
	function loaded(e) {
		myScroll_left = new IScroll('#left_Menu', {
			mouseWheel: true,
			click: true,
			momentum:true,  //开/关势能动画
			scrollbars:false,
			disableMouse: false,
		});
		myScroll_right = new IScroll('#right_Menu', {
			mouseWheel: true,
			click: true,
			momentum:true,  //开/关势能动画
			scrollbars:true,
			disableMouse: false,
			disablePointer: false,
		});
	}

// ---------------------------------------------------------
//    方法1：
//    在touch的事件监听方法上绑定第三个参数{ passive: false }，
//    通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDefault 来阻止默认滑    //    动行为。
	document.addEventListener('touchmove', function(e) {
		console.log(e)
		e.preventDefault();
	}, {
		passive: false    //这一步是阻止默认事件的核心！
	});
</script>    

下面看一下 如果不使用 {passive:false} 来组织默认事件时报的错是否跟你的情况一样

 

当然还有另一总方法就是（博主用的上面的方法，这个自行调试哈）：

* { touch-action: pan-y; } 
 使用全局样式样式去掉

如果 iscroll 有不懂得 可以去看下文档，其实很简单：http://caibaojian.com/iscroll-5/