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

    保证上下可以滑动

  • 相关阅读:
    java中的静态变量与实例变量
    Java中的关键字this
    继承和多类的基础(C++)
    11-1:(42)接雨水
    10-2
    10-1
    9-2
    9-1
    8-2
    8-1
  • 原文地址:https://www.cnblogs.com/rrene/p/9226323.html
Copyright © 2011-2022 走看看