h5 scroll ios 不流畅(粘手)

2019-06-22  本文已影响0人  WEB耳

h5 scroll ios 不流畅(粘手)

BB在前面

在使用vux ui 写了个列表,发现在Safari浏览器上滑动时不流畅,有很严重的粘手的感觉。使用百度和Google搜索,找到了能解决问题的方法。

原因分析

出现这个问题的原因是因为触屏浏览器会监听手势,这样就造成了这个问题的出现。

奉上解决方案

将滑动的盒子设置 CSS属性-- touch-action ,用于设置触摸屏用户如何操纵元素的区域,也可以直接在html元素上设置

// 全局设置
# css
html{
  touch-action: none;
}

//针对元素节点设置
# html 
<div class="scrollDiv">
   <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  ...
</div>
# css
.scrollDiv{
  overflow-y: scroll;
  touch-action: none;
}

写在后面

关于touch-action的传送门

上一篇 下一篇

猜你喜欢

热点阅读