В настоящее время я часами слежу за тем, как создаются все эти современные веб-приложения. Кажется, что при прокрутке во всех направлениях у них переполнены скрытые и все еще анимированные элементы.
Примеры страниц, которые мне понравились, и используйте их:
http://www.contiducco.it/chi-siamo &
https://theshift.tokyo/
Я пытался построить что-то вроде этого, используя:
componentDidMount() {
var scrollDepth = 0;
$(window).bind("mousewheel DOMMouseScroll", function(event) {
if (
event.originalEvent.wheelDelta < 0 ||
event.originalEvent.detail > 0
) {
var onScrollDown = setTimeout(function() {
scrollDepth = scrollDepth + 1;
this.onScrollDown;
}, 10);
} else {
var onScrollUp = setTimeout(function() {
scrollDepth = scrollDepth - 1;
this.onScrollUp;
console.log(scrollDepth);
}, 10);
}
});
Но я думаю, что вычисление scrollDepth несколько раз в секунду очень плохо для частоты кадров.
Существует ли библиотека или более простой / более эффективный способ перемещения элементов путем прокрутки без использования полосы прокрутки?
Спасибо за вашу помощь