防止在 VueJS 中滚动

Question

我试图仅在灯箱组件打开时阻止滚动，但似乎无法这样做。我希望不要使用任何外部库或 plug-ins 来执行此操作。

我的 App.vue 包含 "LightBox" 组件，所以我假设防止滚动功能也应该存在于 App.vue 中。 App.vue 片段：

<template>
  <div class="SocialAlbumWidget">
    <div v-if="isModalVisible && media[activeIndex]">
      <LightBox
        ...
      />

我目前在 "methods" 部分有一个 "showModal ()" 函数，所以正在考虑通过另一个函数传递它。

方法：

mothods: {
...
showModal () {
  this.isModalVisible = true
},
closeModal () {
  this.isModalVisible = false
}

我希望正文在 "Lightbox" 组件关闭时滚动，在 "Lightbox" 组件打开时禁用。谢谢！让我知道还有哪些有用的代码。

Answer 1

您可以使用观察器对 isModalVisible 中的变化做出反应，并使用 style="overflow: hidden" 禁用滚动功能。

大致如下：

// HTML
<btn @click="dialog = !dialog" >Click Me </btn>

// JS
new Vue({
  el: '#app',
  data () {
    return {
      dialog: false,
    }
  },
  watch: {
    isModalVisible: function() {
      if(this.isModalVisible){
        document.documentElement.style.overflow = 'hidden'
        return
      }

      document.documentElement.style.overflow = 'auto'
    }
  }
})

Answer 2

现代解决方案：

防止 LightBox modal 本身的滚动事件 -

<LightBox
 @wheel.prevent
 @touchmove.prevent
 @scroll.prevent
/>

样式 overflow: hidden 可能会引起一些担忧。

例如；

滚动条的可见性
UI 由于滚动条可见性的影响从 hidden 反弹到 auto

防止在 VueJS 中滚动

Prevent Scrolling in VueJS

javascript

jquery

vue.js

vue-component

vue-cli

现代解决方案：