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;
}