H5解决IOS橡皮筋问题

发布于 2023-05-23  107 次阅读


在ios页面中,使用上滑键会导致页面整体上移

解决方案一:

让所有的默认移动事件取消,但这样的话会使得一些滚动条失效

    document.body.addEventListener(
      "touchmove",
      function(e) {

          alert(1);
           e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)

      },
      {
        passive: false
      }
    ); //passive 参数不能省略,用来兼容ios和android

解决方案二:

让指定盒子的滑动效果失效,最好再加上路由限制

       var control = document.getElementsByClassName("Home")[0];
    let _this = this;

    control.addEventListener(
      "touchmove",
      function(e) {
        if (_this.$route.name == "control") {
          e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
        }
      },
      {
        passive: false
      }

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。