vue解决ios橡皮筋回d! 禁止ios滑动回d效果和安卓炫光效果

vue解决ios橡皮筋回d! 禁止ios滑动回d效果和安卓炫光效果,第1张

第一种方法:

通过监听 touchmove 事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

// 禁止页面滚动
    var forbidScroll = function (e) {
      e.preventDefault();
    };
    // 通过 $once 来监听生命周期 beforeDestroy 钩子
    this.$once("hook:beforeDestroy", () => {
      body.removeEventListener("touchmove", forbidScroll);
    });
    //函数调用
    function forbidTouchMove() {
      document.body.style.overflow = "hidden";
      body.addEventListener("touchmove", forbidScroll, { passive: false });
    }
    forbidTouchMove();
方法二:

可以使用css新属性overscroll-behavior
body {
/* 禁用默认的下拉刷新和边界效果,但是依然可以进行滑动导航 */
overscroll-behavior-y: none;
}
但是需要浏览器支持该属性

方法三:

可以使用插件inobounce(但是只适用于ios系统,安卓不适用)
官网:https://github.com/lazd/iNoBounce

在vue中:
//先下载npm install inobounce -s
//然后在script中:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/996565.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存