Javascript流畅的滚动体验

Question

几天来，我一直在尝试重新创建此页面的平滑滚动：

http://thibaudallie.com/

并且没有成功。我在 awwwards 上到处都能看到这种效果，但我从未找到正确的解决方案。

这是我目前最好的曲目，但我认为这不是正确的...

我想要在“wheel”期间触发的东西。

<script>
        const body = document.body,
            scrollWrap = document.getElementsByClassName("smooth-scroll-wrapper")[0],
            height = scrollWrap.getBoundingClientRect().height - 1,
            speed = 0.04;

        let offset = 0;

        body.style.height = Math.floor(height) + "px";

        function smoothScroll() {
            offset += (window.pageYOffset - offset) * speed;

            let scroll = `translate3d(0px, ${offset * -1}px, 0)`;
            scrollWrap.style.transform = scroll;

            callScroll = requestAnimationFrame(smoothScroll);
        }

        smoothScroll();
    </script>

Answer 1

我在 codepen Smooth Page Scroll找到了这个

var html = document.documentElement;
var body = document.body;

var scroller = {
    target: document.querySelector("#scroll-container"),
    ease: 0.05, // <= scroll speed
    endY: 0,
    y: 0,
    resizeRequest: 1,
    scrollRequest: 0,
};

var requestId = null;

TweenLite.set(scroller.target, {
    rotation: 0.01,
    force3D: true
});

window.addEventListener("load", onLoad);

function onLoad() {    
    updateScroller();  
    window.focus();
    window.addEventListener("resize", onResize);
    document.addEventListener("scroll", onScroll); 
}

function updateScroller() {

    var resized = scroller.resizeRequest > 0;

    if (resized) {    
        var height = scroller.target.clientHeight;
        body.style.height = height + "px";
        scroller.resizeRequest = 0;
    }

    var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;

    scroller.endY = scrollY;
    scroller.y += (scrollY - scroller.y) * scroller.ease;

    if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
        scroller.y = scrollY;
        scroller.scrollRequest = 0;
    }

    TweenLite.set(scroller.target, { 
        y: -scroller.y 
    });

    requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}

function onScroll() {
    scroller.scrollRequest++;
    if (!requestId) {
        requestId = requestAnimationFrame(updateScroller);
    }
}

function onResize() {
    scroller.resizeRequest++;
    if (!requestId) {
        requestId = requestAnimationFrame(updateScroller);
    }
}