const returnMax = Math.max; const mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; document.getElementById('js-scroll').addEventListener(mousewheelevent, (e) => { e.preventDefault(); }); let target = document.getElementById('js-scroll'), targetH = target.getBoundingClientRect().height, scrollAmount = 0; document.getElementById('js-scroll').addEventListener(mousewheelevent, (e) => { targetH = target.getBoundingClientRect().height; scrollAmount += e.deltaY * -1; scrollAmount = returnMax(-1 * (targetH - window.innerHeight), scrollAmount); scrollAmount = Math.min(0, scrollAmount); }); let y = 0; const scrollContent = () => { requestAnimationFrame(scrollContent); scrollAmount = returnMax(-1 * (targetH - window.innerHeight), scrollAmount); y += (scrollAmount - y) * 0.08, -0.1 < y && (y = 0); let transform = 'translateY(' + y + 'px) translateZ(0)', style = target.style; style.transform = transform; style.webkitTransform = transform; style.mozTransform = transform; style.msTransform = transform; }; scrollContent();
body { overflow: hidden; } .inner { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 25vh; background-image: linear-gradient(60deg, blue, #e1f5c4); }