防止在 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

}

我希望主体在“灯箱”组件关闭时可以滚动，当“灯箱”组件打开时被禁用。谢谢！让我知道其他哪些代码会有用。

Answer 1

现代解决方案：LightBox仅防止滚动事件<LightBox&nbsp;@wheel.prevent&nbsp;@touchmove.prevent&nbsp;@scroll.prevent/>Vanilla JavaScript在使用框架时避免代码，例如VUE.js您可以设置样式，overflow: hidden但这不是理想的解决方案。虽然它产生了一些问题——滚动条将被隐藏UI 会反弹，因为滚动条从 切换hidden到auto