1. 程式人生 > >完美解決vue專案中彈出框滑動時,內部頁面也跟著滑動問題

完美解決vue專案中彈出框滑動時,內部頁面也跟著滑動問題

在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()