博客

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