Question

如果你看一下this site，似乎他们在React中构建了整个东西。当你滚动时，它比常规滚动更平滑（也许有点＆＃34;更重＆＃34;）。在线查看，似乎有这种行为的无数解决方案，但只有当你专门访问页面中的某个点时，而不仅仅是用鼠标滚动。

查看代码，它在y轴上执行transform: translate3d。

如果我没有在React中构建网站，是否可以使用不太复杂的JS或jQuery解决方案复制它？

Answer 1

在提出代码之前，您应先搜索，学习并尝试选项... LGSon提及。

无论如何，途中会是：

http://jsfiddle.net/gmelcul/cZuym/（来自gdsmith我相信）

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle(delta) {
    var time = 1000;
    var distance = 150;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time );
}

只需使用句柄功能中的值。

它使用不推荐使用的 onmousewheel （https://www.w3schools.com/tags/att_onmousewheel.asp）。应使用 onwheel （https://www.w3schools.com/tags/att_onwheel.asp）

试一试

有谁知道如何复制这种滚动行为？

1 个答案: