页面局部滚动（scroll）实现方式

移动端（手机）开发，页面局部滑动实现方式

       移动端开发，做到手机自适应是一个非常困难的事情。特别是当页面中文字长度不固定时，会导致文字太长超出外部div，或者超出屏幕的问题。此时，需要将文字部分设置为可滚动（scroll）。这样可以做到手机适应。

          第一：在做移动端开发的时候，页面需要一屏显示的时候。要禁用浏览器滑动功能（特别是在微信公众平台开发时）。

$("body").on("touchmove mousemove",function(e){e.preventDefault();});

          第二：禁用掉浏览器的滑动功能时，就需要自己写一个滑动功能。幸运的时，已经有人替咱们写好了。网上可查找touchscroll.js。代码如下：

/* This function makes a div scrollable with android and iphone */

function isTouchDevice(){
	/* Added Android 3.0 honeycomb detection because touchscroll.js breaks
		the built in div scrolling of android 3.0 mobile safari browser */
	if((navigator.userAgent.match(/android 3/i)) ||
		(navigator.userAgent.match(/honeycomb/i)))
		return false;
	try{
		document.createEvent("TouchEvent");
		return true;
	}catch(e){
		return false;
	}
}

function touchScroll(id){
	if(isTouchDevice()){ //if touch events exist...
		var el=document.getElementById(id);
		var scrollStartPosY=0;
		var scrollStartPosX=0;

		document.getElementById(id).addEventListener("touchstart", function(event) {
			scrollStartPosY=this.scrollTop+event.touches[0].pageY;
			scrollStartPosX=this.scrollLeft+event.touches[0].pageX;
			//event.preventDefault(); // Keep this remarked so you can click on buttons and links in the div
		},false);

		document.getElementById(id).addEventListener("touchmove", function(event) {
			// These if statements allow the full page to scroll (not just the div) if they are
			// at the top of the div scroll or the bottom of the div scroll
			// The -5 and +5 below are in case they are trying to scroll the page sideways
			// but their finger moves a few pixels down or up.  The event.preventDefault() function
			// will not be called in that case so that the whole page can scroll.
			if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
				this.scrollTop+event.touches[0].pageY < scrollStartPosY-5) ||
				(this.scrollTop != 0 && this.scrollTop+event.touches[0].pageY > scrollStartPosY+5))
					event.preventDefault();	
			if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
				this.scrollLeft+event.touches[0].pageX < scrollStartPosX-5) ||
				(this.scrollLeft != 0 && this.scrollLeft+event.touches[0].pageX > scrollStartPosX+5))
					event.preventDefault();	
			this.scrollTop=scrollStartPosY-event.touches[0].pageY;
			this.scrollLeft=scrollStartPosX-event.touches[0].pageX;
		},false);
	}
}

touchScroll('touchscroll_div');

          第三：到这里就该写h5代码了。代码分三层div。

                    （1）外层div（card_message_outer）定义大小以及位置：宽高可使用百分比，也可以设置固定值，也就是说，内部div滚动时，不会超出这个div。

                    （2）中层div（card_message_center）设置滚动方式以及相对位置：使用overflow-x或overflow-y 设置横滚动/竖滚动、设置宽高为外部的100%。这里需要注意：要将touchscroll.js和html5中id一致touchscroll_div。

                    （3）内层div（card_message）设置文本显示样式以及首行缩进等。

<div class="card_message_outer">
<span style="white-space:pre">	</span><div class="card_message_center" id="touchscroll_div">
	<span style="white-space:pre">	</span><div class="card_message">
			此处添加不定长文本
		</div>
	</div>
</div>

.card_message_outer {
	width: 100%;
	height: 35%
}

.card_message_center {
	margin-top: 5%;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	position: relative
}

.card_message {
	width: 87%;
	position: absolute;
	line-height: 130%;
	font-size: 15px;
	text-indent: 2em
}