完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题

最新推荐文章于 2024-03-30 16:53:35 发布

I-T枭

最新推荐文章于 2024-03-30 16:53:35 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/107864001

本文介绍了如何在Vue项目中解决弹出框出现时，内部页面跟随滑动的问题。通过在main.js中设置全局函数，并在需要的页面调用特定方法，实现了在苹果和安卓设备上弹出框滑动的正确行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在main.js中设置全局函数：

//弹出框禁止滑动
Vue.prototype.noScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false)// 禁止页面滑动
}
 
//弹出框可以滑动
Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// 出现滚动条
  document.removeEventListener('touchmove', mo, false)
}

在页面使用时：

//禁止主页面滑动
this.noScroll()

//主页面可滑动
this.canScroll()
因为当初是在苹果手机上的测试的，但是在安卓手机发现有些限制，于是解决办法为在main.js中设置全局函数：


// 弹出框显示后调用afterOpen，关闭弹出框前调用beforeClose
Vue.prototype.ModalHelper = (function (bodyCls) {
  var scrollTop
  return {
    afterOpen: function () {
      scrollTop = document.scrollingElement.scrollTop
      document.body.classList.add(bodyCls)
      document.body.style.top = -scrollTop + 'px'
    },
    beforeClose: function () {
      document.body.classList.remove(bodyCls)