Отключить прокрутку. Переполнение: скрыто, не работает ⇐ CSS

[Anonymous]

Мне нужна помощь, как отключить прокрутку, когда открыт лайтбокс vue easy. ничего из того, что я пробовал, не работает.
переполнение: скрытое не работает
я пробовал добавить :scrollDisabled="true" . все еще не повезло
Я спросил в чате, он рекомендовал создать наблюдателя в лайтбоксе, это тоже не сработало.
Буду очень признателен за любую помощь



Check Out Our Stunning Gallery



Loading products...



Error loading products: {{ errorMessage }}


v-for="(product, productIndex) in filteredProducts"
:key="product.productId"
class="product-gallery"
>

{{ product.title }}
{{ product.description }}


‹





›

















import { ref, onMounted, computed, defineProps, withDefaults } from 'vue'
import CloudApi, { type Product } from '@/services/CloudApi'
import VueEasyLightbox from 'vue-easy-lightbox'

// Define Props with Default Value
const props = withDefaults(
defineProps(),
{
selectedCategory: 'All', // Default to 'All' if not provided
}
)

// Define the interface for the gallery product
interface GalleryProduct {
productId: string
title: string
description: string
images: string[]
category: string
}

// Reactive references
const products = ref([])
const isLoading = ref(false)
const error = ref(false)
const errorMessage = ref('')

const currentImageIndexes = ref([])

// Lightbox States
const lightboxVisible = ref(false)
const lightboxImages = ref([])
const lightboxIndex = ref(0)

/**
* Fetches the current version from the backend.
* @returns A promise that resolves to the version number.
*/
const fetchBackendVersion = async (): Promise => {
try {
const version = await CloudApi.getVersion()
return version
} catch (error) {
console.error('Error fetching backend version:', error)
throw error
}
}

/**a
* Fetches products from the API.
* @returns A promise that resolves to an array of GalleryProduct.
*/
const fetchProductsFromApi = async (): Promise => {
try {
const fetchedProducts = await CloudApi.getProducts()

// Map API response to the expected format
const mappedProducts: GalleryProduct[] = fetchedProducts.map((prod: Product) => ({
productId: prod.productId,
title: prod.metadata.name || 'Untitled Product',
description: prod.metadata.description || 'No description available.',
images: [...prod.images],
category: prod.metadata.category || 'All',
}))

return mappedProducts
} catch (err) {
console.error('Error fetching products from API:', err)
throw err
}
}

/**
* Loads products either from cache or by fetching from the API based on version.
*/
const loadProducts = async () => {
isLoading.value = true
error.value = false

try {
// Fetch the current version from the backend
const backendVersion = await fetchBackendVersion()

// Retrieve the local version from localStorage
const localVersionString = localStorage.getItem('cacheVersion')
const localVersion = localVersionString ? JSON.parse(localVersionString).version : null

if (backendVersion === localVersion) {
// Versions match; load products from cache
const cachedData = localStorage.getItem('galleryProducts')
if (cachedData) {
console.log('Using cached products data')
products.value = JSON.parse(cachedData)
currentImageIndexes.value = products.value.map(() => 0)
} else {
// Cache is empty but versions match; fetch from API
console.log('Cache is empty despite matching versions. Fetching from API.')
const fetchedProducts = await fetchProductsFromApi()
products.value = fetchedProducts
currentImageIndexes.value = products.value.map(() => 0)

// Update cache
localStorage.setItem('galleryProducts', JSON.stringify(products.value))
}
} else {
// Versions mismatch; fetch fresh data from API
console.log('Version mismatch. Fetching fresh products data from API.')
const fetchedProducts = await fetchProductsFromApi()
products.value = fetchedProducts
currentImageIndexes.value = products.value.map(() => 0)

// Update cache with new data and version
localStorage.setItem('galleryProducts', JSON.stringify(products.value))
localStorage.setItem('cacheVersion', JSON.stringify({ version: backendVersion }))
}
} catch (err) {
error.value = true
errorMessage.value = (err as Error).message || 'Unknown error'
console.error('Error loading products:', err)
} finally {
isLoading.value = false
}
}

/**
* Navigate to the next image in the gallery.
* @param productIndex - The index of the product in the products array.
*/
const nextImage = (productIndex: number) => {
const images = filteredProducts.value[productIndex].images
currentImageIndexes.value[productIndex] =
(currentImageIndexes.value[productIndex] + 1) % images.length
}

/**
* Navigate to the previous image in the gallery.
* @param productIndex - The index of the product in the products array.
*/
const prevImage = (productIndex: number) => {
const images = filteredProducts.value[productIndex].images
currentImageIndexes.value[productIndex] =
(currentImageIndexes.value[productIndex] - 1 + images.length) % images.length
}

/**
* Set a specific image as the current image.
* @param productIndex - The index of the product in the products array.
* @param imageIndex - The index of the image in the images array.
*/
const setImage = (productIndex: number, imageIndex: number) => {
currentImageIndexes.value[productIndex] = imageIndex
}

/**
* Handle main image loading errors by setting a placeholder image.
* @param productIndex - The index of the product in the products array.
* @param imageIndex - The index of the image in the images array.
*/
const handleImageError = (productIndex: number, imageIndex: number) => {
const placeholder =
'https://via.placeholder.com/1280x720?te ... +Available'
filteredProducts.value[productIndex].images[imageIndex] = placeholder
}

/**
* Handle thumbnail image loading errors by setting a placeholder image.
* @param productIndex - The index of the product in the products array.
* @param imageIndex - The index of the image in the images array.
*/
const handleThumbnailError = (productIndex: number, imageIndex: number) => {
const placeholder = 'https://via.placeholder.com/160x90?text=No+Image'
filteredProducts.value[productIndex].images[imageIndex] = placeholder
}

/**
* Handle thumbnail click to set the current image.
* @param productIndex - The index of the product in the products array.
* @param imageIndex - The index of the image in the images array.
*/
const handleThumbnailClick = (productIndex: number, imageIndex: number) => {
setImage(productIndex, imageIndex) // Update the displayed image
}

/**
* Open the lightbox for a specific image.
* @param productIndex - The index of the product in the products array.
* @param imageIndex - The index of the image in the images array.
*/
const openLightbox = (productIndex: number, imageIndex: number) => {
lightboxImages.value = filteredProducts.value[productIndex].images
lightboxIndex.value = imageIndex
lightboxVisible.value = true
}

/**
* Computed property to filter products based on selectedCategory
*/
const filteredProducts = computed(() => {
if (props.selectedCategory === 'All') {
return products.value
}
return products.value.filter(
(product) => product.category === props.selectedCategory
)
})

// Fetch products on component mount
onMounted(() => {
loadProducts()
})




/* General Styles */
.gallery-container {
position: relative;
z-index: 1;
text-align: center;
max-width: 1200px;
margin: 40px auto;
padding: 40px 20px;
background: #ffffff; /* Opaque background */
border-radius: 16px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.highlight {
color: #d4af37;
}

.gallery-title {
text-align: center;
font-size: 2rem;
font-weight: 900;
color: #2c3e50;
margin-bottom: 30px;
letter-spacing: 1px;
border-bottom: 3px solid #d4af37;
display: inline-block;
padding-bottom: 6px;
}

/* Loading and Error States */
.loading,
.error {
text-align: center;
padding: 40px 0;
font-size: 1.2rem;
color: #2c3e50;
position: relative;
z-index: 1;
}

/* Product Gallery */
.product-gallery {
margin-bottom: 40px;
padding: 20px;
border-top: 1px solid #ddd;
position: relative;
z-index: 1;
}

.product-info {
text-align: center;
margin-bottom: 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}

.product-info h1 {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
text-transform: capitalize;
}

.product-info p {
font-size: 1rem;
color: #7f8c8d;
line-height: 1.5;
text-align: justify;
}

/* Main Image Section */
.gallery-main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 20px;
z-index: 1;
}

.image-container {
flex: 1;
text-align: center;
position: relative;
z-index: 1;
}

.main-image {
max-width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}

.main-image:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3rem;
background: none;
border: none;
color: #e19e02;
cursor: pointer;
z-index: 2;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.nav-arrow.left {
left: 10px;
}

.nav-arrow.right {
right: 10px;
}

/* Thumbnails Section */
.gallery-thumbnails {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 auto;
max-width: 500px;
padding: 10px 5px;
position: relative;
z-index: 1;
}

.thumbnail-container {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}

.thumbnail-container:hover {
transform: scale(1.05);
}

.thumbnail {
width: 60px;
height: 60px;
border-radius: 4px;
cursor: pointer;
object-fit: cover;
border: 2px solid transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition:
border 0.3s ease,
box-shadow 0.3s ease;
}

.thumbnail.active {
border: 3px solid #d4af37;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
.gallery-container {
padding: 20px;
}

.gallery-title {
font-size: 1.6rem;
margin-bottom: 20px;
}

.product-gallery {
padding: 15px;
margin-bottom: 30px;
}

.product-info h1 {
font-size: 1.3rem;
}

.product-info p {
font-size: 0.9rem;
}

.gallery-main {
flex-direction: column;
gap: 10px;
}

.main-image {
max-height: 300px;
}

.nav-arrow {
font-size: 1.5rem;
margin: 0 5px;
}

.gallery-thumbnails {
gap: 6px;
}

.thumbnail {
width: 50px;
height: 50px;
}
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-working