Прокрутка анимации работает с колесом мыши, но автоматические прокрутки на трассе для ноутбука ⇐ Html

[Anonymous]

Я внедрил анимацию свитка, в которой изображения и текст меняются в качестве свитков пользователя. Поведение прокрутки работает отлично при использовании колеса мыши, но когда я пытаюсь прокрутить, используя трекпад ноутбука (или сенсорная панель), разделители автоматически быстро или беспорядочно, что делает опыт непоследовательным. < /P>
вот код: < /p>

Код: Выделить всё

.container {
position: relative;
display: flex;
flex-direction: column;
max-width: 100%;
margin: 0 auto;
height: 100%;
min-height: 100vh;
max-height: calc(100vh * 9);
align-items: center;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0;
-webkit-overflow-scrolling: touch;
overscroll-behavior: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.container::-webkit-scrollbar {
display: none;
}

.image-section {
height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
scroll-snap-stop: always;
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.image-wrapper img {
height: auto;
width: 95%;
object-fit: contain !important;
max-width: none;
max-height: 95vh;
background-color: #fff;
}

.text-container {
display: flex;
position: fixed;
top: 40%;
width: 1280px;
margin: 0 auto;
z-index: 3;
overflow: visible;
}

.content {
position: absolute;
width: 80%;
display: flex;
flex-direction: column;
padding: 0 2%;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}

.content.active {
opacity: 1;
pointer-events: auto;
}

.number {
font-size: 150px;
font-weight: bold;
color: #f6f6f6;
}

.description {
font-size: 42px;
font-weight: 500;
color: #000;
}





01
Lorem ipsum dolor sit amet


02
Consectetur adipiscing elit


03
Sed do eiusmod tempor incididunt





[img]/assets/dummy_1.gif[/img]
Lorem ipsum dolor sit amet




[img]/assets/dummy_2.gif[/img]
Consectetur adipiscing elit




[img]/assets/dummy_3.gif[/img]
Sed do eiusmod tempor incididunt






document.addEventListener("DOMContentLoaded", function () {
const container = document.querySelector(".container");
const sections = document.querySelectorAll(".image-section");
let currentIndex = 0;
let isScrolling = false;

function scrollToSection(index) {
if (index < 0 || index >= sections.length || isScrolling) return;
isScrolling = true;
sections[index].scrollIntoView({ behavior: "smooth" });
setTimeout(() => {
currentIndex = index;
isScrolling = false;
}, 700);
}

container.addEventListener("wheel", function (event) {
if (event.deltaY >  0) {
scrollToSection(currentIndex + 1);
} else {
scrollToSection(currentIndex - 1);
}
});
});

Регулировка установленного времени задержка, чтобы отклонить событие.
Добавление event.preventDefault () < /code> Внутри прослушивателя событий колеса, но это полностью отключает плавную прокрутку.
проверка события. .

Подробнее здесь: https://stackoverflow.com/questions/794 ... p-trackpad