css - 在React中创建平滑滚动(浏览器友好)

Question

我目前正在建立我的网站React。但是refs scroll / css与Safari和某些其他浏览器不兼容。在野生动物园中，它只是跳到div而不是滚动到div。

不兼容

html {
   scroll-behavior: smooth;
}

什么是创建所有浏览器（最新版本）平滑滚动功能的最佳库（处于活动状态）或方法。我不希望它太重，因为它会经常使用。

这是我当前的滚动基于的内容： ReactJS how to scroll to an element

Answer 1

这篇文章解决了您的问题：Solve smooth scroll on all browser

function SmoothVerticalScrolling(e, time, where) {
    var eTop = e.getBoundingClientRect().top;
    var eAmt = eTop / 100;
    var curTime = 0;
    while (curTime <= time) {
        window.setTimeout(SVS_B, curTime, eAmt, where);
        curTime += time / 100;
    }
}

function SVS_B(eAmt, where) {
    if(where == "center" || where == "")
        window.scrollBy(0, eAmt / 2);
    if (where == "top")
        window.scrollBy(0, eAmt);
}

并通过以下方式致电：

SmoothVerticalScrolling(myelement, 275, "center");