Как исправить скрипт горизонтальной прокрутки, который я написал в vanilla JavaScript

Как исправить скрипт горизонтальной прокрутки, который я написал в vanilla JavaScript

Я создал эту страницу горизонтальной прокрутки, основанную на какой-то идее с YouTube, все отлично работает, логика тоже хороша, но у перевода x есть проблема, иногда он переводит X слишком сильно или иногда ниже, чем должен, там должно быть изменение, внесенное в translateThisMuch const, но я не могу думать ни о чем, любая помощь будет принята с благодарностью. это ссылка на код https://codepen.io/AbramPlus/pen/RwwoPrW. Обратите внимание, что при переходе из разных частей прокручиваемых секций к другим все еще остаются некоторые другие, оставшиеся в порте просмотра. это код JS.

 const spacer = document.querySelector(".spacer"); const spacerSecond = document.querySelector(".spacerSecond"); const wrapper = document.querySelector(".wrapper"); const windowEffect = document.querySelector(".windowEffect"); const horizontalScrollEnabler = () ={amp}gt; { const scrollFromTop = window.scrollY; const translateThisMuch = scrollFromTop - spacer.offsetTop; const spacerHeight = window.innerWidth * 4 ; const spacerSecondHeight = spacerSecond.offsetHeight; if (scrollFromTop {amp}gt; spacer.offsetTop {amp}amp;{amp}amp; scrollFromTop {amp}lt; spacerSecond.offsetTop {amp}amp;{amp}amp; scrollFromTop   window.innerHeight {amp}lt; spacerSecond.offsetTop   spacerSecond.offsetHeight) { windowEffect.style.position = "fixed"; wrapper.style.transform = `translateX(-${translateThisMuch}px)`; windowEffect.style.top = "0"; } if (scrollFromTop {amp}lt; spacer.offsetTop) { windowEffect.style.position = "absolute"; windowEffect.style.top = "0"; } if (scrollFromTop {amp}gt; spacer.offsetTop   spacerHeight) { windowEffect.style.position = "absolute"; windowEffect.style.top = `${window.innerWidth * 4}px`; } requestAnimationFrame(horizontalScrollEnabler); }; document.addEventListener("DOMContentLoaded", horizontalScrollEnabler); 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector