Question

我试图仅在打开灯箱组件时阻止滚动，但似乎无法这样做。我希望不要使用任何外部库或插件来做到这一点。

我的App.vue包含“ LightBox”组件，因此我假设阻止滚动功能也应存在于App.vue中。 App.vue片段：

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

我目前在“方法”部分中有一个“ showModal（）”函数，因此我想将其传递给另一个函数。

方法：

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

我希望当“灯箱”组件关闭时，主体会滚动，而当“灯箱”组件打开时，主体会禁用。谢谢！让我知道还有什么其他代码会有用。

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
 @wheel.prevent
 @touchmove.prevent
 @scroll.prevent
/>

在使用 Vanilla JavaScript 等框架时避免使用 VUE.js 代码

您可以将样式设置为 overflow: hidden ，但这不是理想的解决方案。虽然它会产生一些问题 -

滚动条将被隐藏
UI 会反弹，因为滚动条从 hidden 切换到 auto

防止在VueJS中滚动

2 个答案:

解决方案：