фикс скролла
This commit is contained in:
parent
bcbeb2b673
commit
82263639c9
@ -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;
|
||||
}
|
||||
|
||||
/* Кнопки действий */
|
||||
|
Loading…
x
Reference in New Issue
Block a user