通过监听 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中:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)