Лучший способ перехватить только один конкретный элемент на странице ⇐ Html

[Anonymous]

Во-первых, да, я знаю, что все ненавидят скроллджекинг, я тоже, но решение не в моих руках, и теперь мне нужно сделать все, что в моих силах. К сожалению, что бы я ни пытался до сих пор, я не могу обеспечить надежную блокировку прокрутки с помощью PreventDefault в событии «колесо». Любую попытку решения легко обойти, просто прокручивая колесо мыши быстрее/сильнее.
У меня есть простая настройка с помощью GSAP для анимации параграфа текста, выделяющего одно слово за раз:

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id risus pellentesque, egestas libero in, mattis mi. Maecenas gravida ante non ultrices varius. Nam eu lacinia leo, in laoreet massa. Quisque laoreet nulla sem, eget porttitor massa vehicula quis. Suspendisse potenti. Nam vel dictum tellus, nec accumsan quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ac risus porttitor, hendrerit sem aliquet, sollicitudin sapien. Maecenas non lacinia risus. Cras suscipit maximus quam quis venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec consequat molestie tortor, vel ullamcorper erat luctus vel. Nam et scelerisque orci. Vivamus in venenatis ligula. Nulla tellus ante, condimentum in fringilla quis, tristique et purus. Sed nulla mi, posuere non dictum non, posuere et est.

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

const split = new SplitType(".scroll-highlight-text h2", { types: "words" });
const targetElement = document.querySelector(".scroll-highlight-text");

let animProgress = 0;

const tl = gsap
.timeline({ paused: true })
.set(split.words, { duration: 0.1, color: "#FEF7E9", stagger: 0.1 }, 0.1);

Идея состоит в том, что когда targetElement находится в центре области просмотра, колесо больше не управляет прокруткой, а ускоряет анимацию, и наоборот, прокручивает обратно вверх. Когда анимация завершается или полностью возвращается к 0, управление прокруткой отпускается обратно. Он должен быть нацелен только на событие «колесо» (лучший компромисс, о котором мне удалось договориться...).
Я пробовал прослушиватель колеса с различными подходами внутри, но ничего не работает надежно и последовательно. Я чувствую, что должен быть лучший способ на 100% надежно предотвратить возможность прокрутки без просмотра анимации.
Я надеялся, что для этого может быть просто библиотека, но после просмотра некоторых из них, таких как Lenis и Fullpage.js, у них, похоже, нет очевидного способа достичь того, к чему я стремлюсь.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -page-only