Я создаю веб-сайт с «фальшивой» прокруткой, где я сделал 5 разделов домашней страницы, я отключил переполнение, чтобы запретить пользователям прокручивать, и то, что я сделал, - это использование JS eventlistener (wheel) для прослушиванияscroll, и когда он обнаруживает прокрутку, он добавляет класс к определенным нужным элементам HTML, к которому прикреплена анимация css, чтобы перевести новый раздел поверх предыдущего.
Проблема, с которой я столкнулсяВ том-то и дело, что если я опущу одно колесо, ничего страшного, если я сильно потяну колесо назад, оно прорвется через весь EventListener.
Надеюсь, я объясню это ясно.
Здесьэто фрагмент JS, который у меня есть - может быть, есть лучший способ в CSS - я открыт для идей:
window.addEventListener('wheel', (e) => {
counter++;
if(counter === 1) {
landingClass.className = 'landingDisappear';
shipClass.setAttribute('class','rocketLands');
smokeClass.setAttribute('class', 'smokeAppears');
missionHeaderClass.className += ' missionHeaderAppears';
missionTextAreaClass.className += ' missionTextAreaAppears';
} else if(counter === 2) {
missionStatementClass.className += ' missionStatementDisappear';
whatDoWeDoServicesClass.className += ' what-do-we-do-servicesAppears';
}
});
Любой совет приветствуется - дайте мне знать, если вам нужна дополнительная информация или есть предложениена лучший метод.
Спасибо!