0

我正在构建一个使用该react-scroll库的网站,并且正在使用该Link组件来激活某些转换。我正在使用该duration属性,它在 Chrome 上运行良好,但是当我在 Firefox 上测试网站时,持续时间不会改变并且运行速度明显快于它在 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>

此问题与其他动画一起影响网站的功能,但根本原因是运行所需的持续时间。

4

1 回答 1

0

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

于 2020-06-05T18:18:09.777 回答