美文网首页我爱编程
ios fixed 拖动兼容

ios fixed 拖动兼容

作者: 哎呦程序猿 | 来源:发表于2018-04-11 16:56 被阅读188次
方法一:(我用了但是没起作用,可以忽略看方法二)
<preference name="WebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="false"/>

将上面代码复制根目录config.xml配置文件里面


上面是ios和android版本都兼容,下面是只针对ios
方法二:

第一步:将body设置为

body{
    position:fixed;
    width: 100%;
  }

第二步:在main.js里面对ios界面进行控制

//ios 界面拖拽会出现顶部或者底部脱离位置的滑动现象
document.querySelector('body').addEventListener('touchmove', function(e) {
  //禁止顶部拖动
  if (document.querySelector('.topnavbar').contains(e.target)) {
    e.preventDefault();
  }
  //禁止底部拖动
  if (document.querySelector('.bottombar').contains(e.target)) {
    e.preventDefault();
  }
  //对中间部分拖动进行优化
  var content = document.querySelector('.centerpage');
  var startY;
  content.addEventListener('touchstart', function (e) {
    startY = e.touches[0].clientY;

  });

  content.addEventListener('touchmove', function (e) {
    // 高位表示向上滚动
    // 底位表示向下滚动
    // 1容许 0禁止
    var status = '11';
    var ele = this;
    var currentY = e.touches[0].clientY;
    if (ele.scrollTop === 0) {
      // 如果内容小于容器则同时禁止上下滚动
      status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
    } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
      // 已经滚到底部了只能向上滚动
      status = '10';
    }
    if (status != '11') {
      // 判断当前的滚动方向
      var direction = currentY - startY > 0 ? '10' : '01';
      // 操作方向和当前允许状态求与运算,运算结果为0,就说明不允许该方向滚动,则禁止默认事件,阻止滚动
      if (!(parseInt(status, 2) & parseInt(direction, 2))) {
        e.preventDefault();
      }

    }

  });

})

相关文章

  • ios fixed 拖动兼容

    方法一:(我用了但是没起作用,可以忽略看方法二) 将上面代码复制根目录config.xml配置文件里面 方法二: ...

  • H5 兼容性问题汇总

    1、 2、h5 fixed 用 absolute 替代,fixed 在IOS上兼容性有问题 3、h5 ios移动端...

  • H5开发踩坑之旅

    1、H5页面在IOS后退不刷新 2、ios对fixed的属性兼容性 3、Input框的兼容性 3.1、input ...

  • iOSinput输入光标掉落

    iOS11的兼容问题 jquery weUI的弹框定位为position:fixed; 修改body的定位: ...

  • fixed ios系统兼容问题

    亲测有效 !本人还有个公众号博主梦:探图匠

  • 2020-06-08

    ios 部分机型 对input框不兼容 当获取焦点后,光标错位,一般是弹出框使用fixed布局导致; 而光标过大,...

  • React爬坑之路(一)

    完美解决H5弹出键盘遮盖输入框和解决ios端fixed不兼容问题 1.整体布局absolute 2.设置监听函数 ...

  • 前端bug锦集之APP嵌套

    1、fixed布局,在IOS11下,如果IOS本身底部有导航,我的fixed就凌乱了,这个是IOS11新增东东的原...

  • ios fixed定位底部问题

    因为ios弹性盒子原因,滑动页面发现fixed区域会随着向上滑动会逐渐不见,参看帖子# 深入探究iOS下fixed...

  • ios手机H5开发input、fixed、video兼容问题

    一、ios手机fixed 在ios手机中对定位的fixed不友好,有时定位在底部的按钮会有时出现或不出现,这时可以...

网友评论

    本文标题:ios fixed 拖动兼容

    本文链接:https://www.haomeiwen.com/subject/fjbkhftx.html