vue.js中实现禁止浏览器滚动方法

2020-10-15 829 2 编辑:深圳App开发 来源:互联网

大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家。

思路是这样的,当弹窗弹出时候,让body overflow: hidden; 超出隐藏,当取消弹窗时候,再让 overflow: visible; 恢复默认值即可。

在vue项目中,src文件中,自行新建js文件 tp-scroll.js,将下放代码放入

export default {

  // 允许页面滚动

  AddScroll () {

    document.body.style.overflow = "visible";

  },

  // 禁止页面滚动

  RemoveScroll () {

    document.body.style.overflow = "hidden";

  }

}

然后,可以在main.js中全局引入,也可以哪个组件用,哪个组件引用,如下

在组件js中引入 import TpScroll from '@/assets/resource/tp-scroll.js'

然后使用:

清除禁止滚动,恢复默认

TpScroll.AddScroll();

禁止滚动

TpScroll.RemoveScroll();

例如,我们在弹窗弹出时候,执行禁止滚动,关闭弹窗时候,执行恢复默认即可。

微信小程序开发

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5