overflow 导致vue-touch左右移动失效

overflow 导致vue-touch左右移动失效

最近在写vue的移动端项目。想要用vue-touch 做左右滑动后退功能。按照网上的例子做了,例如:

npm insall vue-touch@next --save  

main.js中引入,注意:这样打包后文件里的vendor.js会引入hammer.js(手势检测)

import VueTouch from 'vue-touch';
Vue.use(VueTouch, {
  name: 'v-touch'
});
VueTouch.config.swipe = {
  threshold: 10 //手指左右滑动触发事件距离
}

问题是在firefox浏览器左右滑动没有问题,但是在chrome浏览器上左右滑动失效。
原因就是在  内部的div中存在 overflow属性。解决方式是overflow 属性下面再加一个touch-action: pan-y!important 即可。

element.style {
    height: 766px;
    overflow-y: scroll;
    touch-action: pan-y!important;
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值