From 82263639c90cfe60ccd95f3bbc439f3169f3256e Mon Sep 17 00:00:00 2001 From: Professional Date: Sun, 25 May 2025 21:31:49 +0700 Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D1=81=D0=BA=D1=80?= =?UTF-8?q?=D0=BE=D0=BB=D0=BB=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/SwipeView.vue | 88 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 78 insertions(+), 10 deletions(-) diff --git a/src/views/SwipeView.vue b/src/views/SwipeView.vue index 4b13ddd..809b8a2 100644 --- a/src/views/SwipeView.vue +++ b/src/views/SwipeView.vue @@ -721,6 +721,29 @@ const onImageError = (event, userOnError, photoInfo, sourceType) => { ); }; +// Добавляем функции для полного запрета скроллинга +const preventScroll = (e) => { + e.preventDefault(); + e.stopPropagation(); + return false; +}; + +const preventWheelScroll = (e) => { + // Запрещаем прокрутку колесом мыши + e.preventDefault(); + e.stopPropagation(); + return false; +}; + +const preventTouchScroll = (e) => { + // Разрешаем touch события только для карточек (свайп) + if (!e.target.closest('.swipe-card') && !e.target.closest('.carousel-nav') && !e.target.closest('.dot')) { + e.preventDefault(); + e.stopPropagation(); + return false; + } +}; + // Обработчики событий жизненного цикла onMounted(() => { if (isAuthenticated.value) { @@ -729,12 +752,36 @@ onMounted(() => { error.value = "Пожалуйста, войдите в систему, чтобы просматривать анкеты."; loading.value = false; } + + // Добавляем обработчики для блокировки скроллинга + const swipeContentElement = document.querySelector('.swipe-content'); + if (swipeContentElement) { + swipeContentElement.addEventListener('wheel', preventWheelScroll, { passive: false }); + swipeContentElement.addEventListener('scroll', preventScroll, { passive: false }); + swipeContentElement.addEventListener('touchmove', preventTouchScroll, { passive: false }); + } + + // Блокируем скроллинг на уровне всего документа при нахождении в SwipeView + document.body.style.overflow = 'hidden'; + document.documentElement.style.overflow = 'hidden'; }); onUnmounted(() => { // Удаляем обработчики мыши при размонтировании компонента document.removeEventListener('mousemove', moveDrag); document.removeEventListener('mouseup', endDrag); + + // Удаляем обработчики блокировки скроллинга + const swipeContentElement = document.querySelector('.swipe-content'); + if (swipeContentElement) { + swipeContentElement.removeEventListener('wheel', preventWheelScroll); + swipeContentElement.removeEventListener('scroll', preventScroll); + swipeContentElement.removeEventListener('touchmove', preventTouchScroll); + } + + // Восстанавливаем скроллинг при выходе из компонента + document.body.style.overflow = ''; + document.documentElement.style.overflow = ''; }); // Следим за изменениями в списке предложений @@ -766,7 +813,8 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { width: 100%; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; - overflow: hidden; + overflow: hidden !important; + overscroll-behavior: none !important; } /* Блокировка прокрутки */ @@ -774,6 +822,8 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { overflow: hidden !important; touch-action: none !important; position: relative; + overscroll-behavior: none !important; + -webkit-overflow-scrolling: auto !important; } /* Хедер */ @@ -805,8 +855,19 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { display: flex; flex-direction: column; position: relative; - overflow: hidden; - padding-bottom: var(--tabs-height, 56px); /* Добавляем отступ снизу, чтобы учесть высоту табов */ + overflow: hidden !important; + overscroll-behavior: none !important; + padding-bottom: var(--tabs-height, 56px); + /* Полная блокировка всех видов скроллинга */ + -webkit-overflow-scrolling: auto !important; + -ms-overflow-style: none !important; + scrollbar-width: none !important; +} + +/* Скрываем полосы прокрутки во всех браузерах */ +.swipe-content::-webkit-scrollbar { + display: none !important; + width: 0 !important; } /* Состояния загрузки и ошибки */ @@ -819,6 +880,7 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { flex: 1; padding: 1rem; color: white; + overflow: hidden !important; } .loading-spinner { @@ -881,7 +943,9 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { flex-direction: column; position: relative; padding: 0.8rem; - touch-action: none; + touch-action: none !important; + overflow: hidden !important; + overscroll-behavior: none !important; } /* Стек карточек */ @@ -892,6 +956,8 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { width: 100%; max-width: 400px; perspective: 1000px; + overflow: hidden !important; + overscroll-behavior: none !important; } /* Свайп-карточка */ @@ -900,17 +966,19 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { top: 0; left: 0; right: 0; - height: calc(100% - 16px); /* Ограничиваем высоту карточки, чтобы она не выходила за нижнюю границу */ + height: calc(100% - 16px); border-radius: 16px; background-color: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); - overflow: hidden; + overflow: hidden !important; display: flex; flex-direction: column; will-change: transform; transition: transform 0.3s ease, opacity 0.3s ease, scale 0.3s ease; - cursor: pointer; /* Добавляем курсор указатель */ - user-select: none; /* Предотвращаем выделение текста */ + cursor: pointer; + user-select: none; + touch-action: none !important; + overscroll-behavior: none !important; } .swipe-card.active { @@ -1114,8 +1182,8 @@ watch(currentUserToSwipe, async (newUser, oldUser) => { padding: 12px 16px; border-top: 1px solid rgba(0, 0, 0, 0.05); flex-shrink: 0; - max-height: 100px; /* Ограничиваем высоту секции с деталями */ - overflow-y: auto; /* Добавляем прокрутку, если текст не помещается */ + max-height: 100px; + overflow-y: auto; } /* Кнопки действий */