针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。

在iOS的微信,QQ,Safari等浏览器, 列表顶部下拉和底部上拉露出浏览器灰色背景。
针对此问题，在一些移动端页面下拉、上拉过程导致浏览器底部露出背景。 在一定程度上会影响用户的正常操作 以及 用户体验。

**省下好多喝茶的片刻，以及找过网上类似的解决方法。 终于想到一套能够很好解决此类问题的办法！ **

需要解决此刻需求的朋友参考文章，提供给大家思路以及参考学习。

具体实现步骤以及思路，2步

1、定义需要滚动的区域容器，#scrollWrap， 注意设置高度百分比或者像素值 和 overflow: auto;。 监听#scrollWrap 滚动，其滚动条到达顶部（scrollTop = 0） 以及 滚动条到达底部（(scrollTop / (contentHeight - viewHeight)) == 1） 时 禁用移动端touchmove 事件 。

2、监听容器touchstart 以及 touchmove事件。滚动条到达顶部，禁用下拉手势的touchmove 事件。反之滚动条到达底部，禁用容器上拉手势touchmove 事件。

以下提供实例参考使用。

1、构建内容主体。

<div id="scrollWrap">
	//主体内容，请随意，别刻意。
</div>

2、设置容器主体 #scrollWrap 样式。

html,body{
	margin: 0;
	height: 100%;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-overflow-scrolling: touch;
}
#scrollWrap{
	/*注意必须是设置 容器的有效高度*/
	height: 100%;
	overflow: auto;
}

3、阻止移动端 touchmove 事件的具体JS处理逻辑。

//滚动条是否在顶部
var isScroll_top = true;
//滚动条是否在底部
var isScrill_bottom = false;
function restoreEvent(event) {
	switch(event.type){
		case "touchstart" :
			$startY = event.touches[0].clientY;
			break;
		case "touchmove" :
			$moveY = event.touches[0].clientY;
			//滑动距离
			touchesY = $startY - $moveY;
			//滚动条顶部
			if(isScroll_top) {
				if(touchesY < 0) {
					event.preventDefault();
				}else{
					var scrollWrap = document.getElementById("scrollWrap");
					if(scrollWrap.scrollHeight == scrollWrap.clientHeight) {
						event.preventDefault();
					}else {
						event.stopPropagation();
					}
				}
			//滚动条底部
			}else if(isScrill_bottom){
				if(touchesY	> 0) {
					event.preventDefault();
				}else{
					event.stopPropagation();
				}
			}
			break;
		case "touchend" :
			break;
	}
}

/*监听容器的 touch 触发事件处理逻辑*/
document.getElementById("scrollWrap").addEventListener("touchstart",restoreEvent);
document.getElementById("scrollWrap").addEventListener("touchmove",restoreEvent);
document.getElementById("scrollWrap").addEventListener("touchend",restoreEvent);

/*监听容器 scroll 滚动事件处理逻辑*/
document.getElementById("scrollWrap").addEventListener("scroll",function() {
    var tabView = document.getElementById("scrollWrap");
    var contentHeight = tabView.scrollHeight, //内容高度
    scrollTop = tabView.scrollTop; //滚动高度
    viewHeight = tabView.clientHeight;

	if(scrollTop == 0) {
		isScroll_top = true;
	}else{
		isScroll_top = false;
	}
    if ((scrollTop / (contentHeight - viewHeight)) == 1 ) {
        isScrill_bottom = true;
    }else {
    	isScrill_bottom = false;
    }
});

附件源码下载：
http://download.csdn.net/download/china_guanq/10220298

到此就结束了。如在哪里地方有些不适，欢迎留言提出建议、指点。 或者加入Q群 595377655学习讨论。