Question

我找到了一个脚本，可以使next.js上的滚动工作更加顺畅。

这是仓库： https://gist.github.com/vinaypuppal/b7271ad84a0d69c9cfafaaa83afed199

我添加了所有必需的内容，还添加了第一个评论建议的更改。但仍与使用react/link相同。

问题在于它甚至没有调用此代码：

  //#LinkSmoothScroll.js
  //...

  linkClicked(e) {
    e.preventDefault()
    Router
      .push(this.props.href)
      .then(() => {
        console.log('test') //this one is not being called at all when I click the <LinkSmoothScroll>
        return smoothScroll(this.props.href)
      })
      .then(() => {
        this.props.done && this.props.done()
      })
      .catch(err => {
        this.props.onError && this.props.onError(err)
        console.error(err)
      })
  }

  //...

Answer 1

我想出了这个解决方案，因为当您在同一页面上时，您无需等待Router.push()被执行然后再继续smoothScrool()，因为它永远不会

linkClicked(e) {
    e.preventDefault();
    const scrollX = window.pageXOffset;
    const scrollY = window.pageYOffset;

    const location = window.location;
    const href = this.props.href;

    if (location.pathname === href.split('#')[0]) {
      Router.push(this.props.href);
      window.scrollTo(scrollX, scrollY);
      return smoothScroll(this.props.href)
    }
    else {
      Router
        .push(this.props.href)
        .then(() => {
          window.scrollTo(scrollX, scrollY);
          return smoothScroll(this.props.href)
        })
        .then(() => {
          this.props.done && this.props.done()
        })
        .catch(err => {
          this.props.onError && this.props.onError(err)
          console.error(err)
        })
    }
  }

因此，如果您在同一位置，它将仅移动到该ID，否则它将加载页面然后将其移动。

为什么平滑滚动在NextJs上不起作用

1 个答案: