overflow:auto滚动在移动端出现滑动不流畅问题

一个三个模块:头部、中部、尾部的页面,使用

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>

转载于:https://my.oschina.net/u/879103/blog/634348

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值