фикс скролла

This commit is contained in:
Professional 2025-05-25 21:31:49 +07:00
parent bcbeb2b673
commit 82263639c9

View File

@ -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;
}
/* Кнопки действий */