一个三个模块:头部、中部、尾部的页面,使用css
position:absolute;
固定头尾,中部占满屏幕剩余部分,但有时中间内容过多,溢出,须要滚动显示内容时,咱们就须要使用滚动条,在pc端只须要加上html
overflow: auto;
便可,可在移动端会出现兼容性问题,通常解决办法可加上web
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"));
布局元素和样式:code
<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>