Vue Easy Lightbox打开时无法禁用滚动的问题求助

针对你遇到的Vue Easy Lightbox打开后无法禁用页面滚动的问题，以下是经过验证的可行方案，解决你之前方法无效的问题：

核心问题分析 #

你之前尝试的overflow: hidden仅设置body、scrollDisabled属性失效，大概率是因为：

• 部分浏览器（如iOS Safari）需要同时锁定html和body的滚动
• 旧版本Vue Easy Lightbox的scrollDisabled属性已被移除或变更为事件触发
• 监听器未正确绑定到lightbox的open/close生命周期事件

方案一：结合组件内置事件 + 滚动位置锁定 #

利用Vue Easy Lightbox的@open和@close事件，在弹出时锁定页面滚动并保存当前滚动位置，关闭时恢复，避免页面跳动：

<template>
  <!-- 触发lightbox的按钮 -->
  <button @click="isLightboxOpen = true">打开lightbox</button>

  <!-- Vue Easy Lightbox组件 -->
  <VueEasyLightbox
    :visible="isLightboxOpen"
    :imgs="imageList"
    @open="lockPageScroll"
    @close="unlockPageScroll"
    @close-modal="unlockPageScroll" <!-- 点击遮罩关闭时也触发 -->
  />

  <!-- 长内容测试容器 -->
  <div class="container">
    <p>滚动测试内容...</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VueEasyLightbox from 'vue-easy-lightbox'

const isLightboxOpen = ref(false)
const imageList = ref([
  { src: '你的图片地址1', title: '图片1' },
  { src: '你的图片地址2', title: '图片2' }
])

// 锁定页面滚动
function lockPageScroll() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  // 同时锁定html和body，兼容多浏览器
  document.documentElement.style.overflow = 'hidden'
  document.body.style.cssText = `
    position: fixed;
    top: -${scrollTop}px;
    left: 0;
    width: 100%;
    overflow: hidden;
  `
}

// 解锁页面滚动并恢复位置
function unlockPageScroll() {
  const scrollTop = parseInt(document.body.style.top || '0')
  document.documentElement.style.overflow = ''
  document.body.style.cssText = ''
  window.scrollTo(0, Math.abs(scrollTop))
}
</script>

<style scoped>
.container {
  height: 2000px;
  background-color: #fafafa;
  padding: 20px;
}
</style>

方案二：修复你的测试代码（验证滚动锁定逻辑） #

如果你的测试代码中overflow: hidden无效，可修改为同时锁定html和body，并保存滚动位置，确保逻辑正确：

<template>
  <div class="container">
    <button @click="toggleScrollLock">
      {{ isScrollLocked ? '解锁滚动' : '锁定滚动' }}
    </button>
    <p>向下滚动测试，锁定后页面不应滚动。</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isScrollLocked = ref(false)

function toggleScrollLock() {
  isScrollLocked.value = !isScrollLocked.value
  const htmlEl = document.documentElement
  const bodyEl = document.body

  if (isScrollLocked.value) {
    // 保存当前滚动位置
    const scrollTop = window.pageYOffset || htmlEl.scrollTop
    // 锁定滚动并固定位置
    bodyEl.style.position = 'fixed'
    bodyEl.style.top = `-${scrollTop}px`
    bodyEl.style.overflow = 'hidden'
    htmlEl.style.overflow = 'hidden'
  } else {
    // 恢复滚动位置
    const scrollTop = parseInt(bodyEl.style.top || '0')
    bodyEl.style.position = ''
    bodyEl.style.top = ''
    bodyEl.style.overflow = ''
    htmlEl.style.overflow = ''
    window.scrollTo(0, Math.abs(scrollTop))
  }
}
</script>

<style scoped>
.container {
  height: 2000px;
  background-color: #fafafa;
  padding: 20px;
  font-family: sans-serif;
}

button {
  margin: 20px;
  padding: 10px 15px;
  cursor: pointer;
}
</style>

方案三：阻止lightbox内部滚动冒泡（可选） #

如果页面滚动是因为lightbox内部元素触发的（比如长图片列表），可直接阻止滚动事件冒泡；若需保留内部局部滚动，可添加边界判断：

<VueEasyLightbox
  :visible="isLightboxOpen"
  :imgs="imageList"
  @wheel.prevent="handleWheel"
  @touchmove.prevent="handleTouchMove"
/>

<script setup lang="ts">
// 允许lightbox内部局部滚动的判断逻辑
function handleWheel(e: WheelEvent) {
  const lightboxContent = document.querySelector('.el-lightbox__content')
  if (lightboxContent) {
    const isAtTop = lightboxContent.scrollTop === 0 && e.deltaY < 0
    const isAtBottom = lightboxContent.scrollHeight - lightboxContent.scrollTop === lightboxContent.clientHeight && e.deltaY > 0
    // 仅在滚动到边界时阻止冒泡
    if (isAtTop || isAtBottom) {
      e.preventDefault()
    }
  }
}

function handleTouchMove(e: TouchEvent) {
  // 类似滚轮事件的边界判断逻辑，按需实现
}
</script>

内容的提问来源于stack exchange，提问作者sunny