防止在 VueJS 中滚动答案

【问题标题】：Prevent Scrolling in VueJS防止在 VueJS 中滚动
【发布时间】：2019-11-06 09:51:14
【问题描述】：

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

我的 App.vue 包含“LightBox”组件，所以我假设防止滚动功能也应该存在于 App.vue 中。 App.vue sn-p:

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

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

方法：

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

我希望当“Lightbox”组件关闭时正文可以滚动，而当“Lightbox”组件打开时则禁用。谢谢！让我知道还有哪些有用的代码。

【问题讨论】：

请发布您的methods 对象
codepen.io/whatupnewyork/pen/gNRLgd?editors=1010
@Charlie 如您所见，我刚刚更新了它。同时，我会翻看你刚才评论的笔。

标签： javascript jquery vue.js vue-component vue-cli

【解决方案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'
    }
  }
})

【讨论】：

语法错误：语法错误：/Users/angello.lazar/Desktop/sdc-social-album-widget/src/App.vue：意外令牌，预期“，”（128:35）126 | }, 127 |观看：{ > 128 | isModalVisible: preventScroll(){
说得通——谢谢。但是，不知道为什么我会收到此错误...
想通了！感谢您的帮助！
这不适用于 ios 设备。您需要固定内容并查看页面滚动位置，然后将负位置顶部添加到您的固定包装。之后，当滚动打开时，你需要 js 上的 scrollTop() 到 prev 位置。

【解决方案2】：

现代解决方案：

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

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

在我看来，overflow: hidden 这样的样式可能会引起一些担忧。

比如;

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

【讨论】：

@touchmove.prevent 在移动设备上为我工作。我喜欢它