一个三个模块:头部、中部、尾部的页面,使用
position:absolute;
固定头尾,中部占满屏幕剩余部分,但有时中间内容过多,溢出,需要滚动显示内容时,我们就需要使用滚动条,在pc端只需要加上
overflow: auto;
即可,可在移动端会出现兼容性问题,一般解决办法可加上
overflow: auto;-webkit-overflow-scrolling:touch;
由于中间内容滑动到顶部或者底部时,会触发整个页面的滑动事件,我们可以用js阻止页面默认滑动事件的发生,从而阻止整个页面的上移或者下移,touchstart事件阶段,记录手指的Y坐标startY,touchmove事件阶段,算出手指移动距离diffY=e.touches[0].pageY-startY;判断当div移动到最顶部且手指向下滑动时或者当div滑动到最下面且手指向上滑动时,阻止整个页面的默认事件发生;touchend阶段,移除阻止事件,代码实现如下:
//判断是否支持触摸事件
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(obj){
if(isTouchDevice()){
var el=obj[0];
var startY=0,diffY=0;
var scrollHeight=el.scrollHeight;
var bindPreventTouch=function(){
$(document.body).on("touchmove",function(e){
e.preventDefault();
});
};
obj.on('touchstart',function(e){
startY=e.touches[0].pageY;
});
obj.on('touchmove',function(e){
diffY=e.touches[0].pageY-startY;
if(el.scrollTop===0&&diffY>0){
//到最上面
bindPreventTouch();
}else if((scrollHeight-el.scrollTop-el.offsetHeight)===0&&diffY<0){
//到最下面
bindPreventTouch();
}
});
obj.on('touchend',function(e){
$(document.body).off('touchmove');
});
}
}
touchScroll($("#MyElement"));
布局元素和样式:
<div class="wrap">
<header>头部</header>
<div class="main" id="MyElement">
<div class="mainbox">弹性滚动区域</div>
</div>
<footer>底部</footer>
</div>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%;}
.wrap{width: 100%;}
.wrap{width: 100%;height: 100%;position: absolute;top:0;right: 0;bottom: 0;left: 0;overflow: auto;-webkit-overflow-scrolling:touch;}
header,footer{height: 40px;line-height: 40px;background-color:#D8D8D8;text-align:center;position: absolute;left: 0;width: 100%;}
header{top: 0;}
footer{bottom: 0;}
.main{position: absolute;z-index: 1;top:40px;bottom: 40px;width: 100%;background-color: #efefef;overflow: auto;}
/* 隐藏滚动条 */
/* .main::-webkit-scrollbar{display: none;} */
.mainbox{width:100%;height: 600px;background-image:-webkit-linear-gradient(top, orange, green);}
</style>