javascript - 防止 VueJS 中的滚动

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
}

我希望主体在“Lightbox”组件关闭时滚动，并在“Lightbox”组件打开时禁用。谢谢!让我知道还有哪些其他有用的代码。

Answer 1

防止 LightBox modal 本身发生滚动事件 -

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

<小时/>

样式溢出:隐藏可能会引起一些担忧。

比如；

• 滚动条的可见性
• UI 弹跳 w.e.f 溢出切换