页面局部滚动（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
}