zoukankan      html  css  js  c++  java
  • 手机端禁止浏览器左右滑动

    在手机端vue项目中,禁止页面左右滑动,代码直接写在index.html中

    var startPos = 0,endPos = 0,isScrolling = 0;
    document.addEventListener('touchstart',function(event){
    var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
    startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
    isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
    }, false);

    //解绑事件 web前端开发
    document.addEventListener('touchend',function(event){
    document.removeEventListener('touchmove',this,false);
    document.removeEventListener('touchend',this,false);
    }, false);

    document.addEventListener('touchmove',function(event){
    //当屏幕有多个touch或者页面被缩放过,就不执行move操作
    if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
    var touch = event.targetTouches[0];
    endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
    isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
    if(isScrolling === 0){
    // alert(0);
    event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
    }
    }, false);

    保证上下可以滑动

  • 相关阅读:
    postfix遇到的问题
    SElinux以及防火墙的关闭
    centos查看系统信息
    WINDOWS访问SAMBA提示没有权限
    常用命令
    口才
    【李敖的管理经】
    随笔
    查询MX记录
    bash: ifconfig: command not found
  • 原文地址:https://www.cnblogs.com/rrene/p/9226323.html
Copyright © 2011-2022 走看看