React-Scroll 持续时间不适用于 Firefox，但适用于 Chrome

Question

我正在构建一个使用 react-scroll 库的网站，并且正在使用 Link 组件来激活某些转换。我正在使用 duration 属性，它在 Chrome 上完美运行，但是当我在 Firefox 上测试网站时，持续时间没有改变并且运行s 明显更快比 Chrome 上的要好。这是我的代码：

<Link
   activeClass="active"
   to={this.state.prevSectionId}
   spy={true}
   onSetActive={() => this.handleSectionChange(-1)}
   duration={1000}>
   <FontAwesomeIcon icon={faChevronUp} size="lg" />

我还有一个自定义 button 滚动到页面顶部，并且在 Firefox 中的动画速度也比在 Chrome 中快得多，没有设置持续时间：

<div id="scrollToTopButtonWrapper">
    <button onClick={() => window.scrollTo(0, 0)}>
        <FontAwesomeIcon icon={faArrowCircleUp} size="4x" />
    </button>
</div>

此问题与其他动画一起影响网站的功能，但根本原因是运行。

所需的持续时间

Answer 1

看来这个问题是由 scroll-behavior 在我的 css 中设置为 smooth 引起的。我能够通过从 css 中删除它并在我的 Link 组件中添加 smooth={true} 来解决问题。

React-Scroll 持续时间不适用于 Firefox，但适用于 Chrome

React-Scroll duration doesn't apply on Firefox but it works on Chrome

javascript

reactjs

react-scroll