更改 Gatsby 链接行为 - 页面更改时停止滚动动画答案

【问题标题】：Change Gatsby Link Behaviour - Stop Scroll Animation on Page Change更改 Gatsby 链接行为 - 页面更改时停止滚动动画
【发布时间】：2021-03-08 10:54:04
【问题描述】：

我确信这将是一个非常直接的答案，但我终其一生都无法弄清楚如何让我的 Gatsby/React 网站在没有滚动条的情况下从新页面的顶部开始单击内部链接时的过渡效果。

示例：在我的主页上，我滚动到底部，然后单击一个链接将我带到“关于我”页面。 About Me 页面加载时浏览器滚动位置仍位于页面底部，然后窗口滚动到页面顶部。这只需要几毫秒，但是当我点击一个链接时，我想从页面顶部开始，没有任何过渡。

链接都是标准的 Gatsby 链接：

    <Link className="" to="/aboutme/">
      About Me
    </Link>

谢谢！

编辑

在我的布局包装器中添加，并添加了 useScrollRestoration 钩子：

import React from 'react'
import PropTypes from 'prop-types'
import useScrollRestoration from 'gatsby'

import NavBar from './NavBar/NavBar'
import Footer from './Footer/Footer'

import './layout.scss'

const Layout = ({ children }) => {
  const aboutMeScrollRestoration = useScrollRestoration(`page-component-main`)

  return (
    <>
      <NavBar />
      <main className="bumpdown" {...aboutMeScrollRestoration}>
        {children}
      </main>
      <Footer />
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

经过大量的谷歌搜索，我最终设法解决了这个问题。它似乎不是滚动恢复问题，而是引导问题。在 bootstrap/scss/_reboot.scss 中有如下代码：

:root {
  font-size: $font-size-root;

  @if $enable-smooth-scroll {
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
}

这可以在引导覆盖中使用$enable-reduced-motion: true; 或$enable-smooth-scroll: false; 关闭，当新页面打开时停止滚动行为。

我正在使用 enable-smooth-scrolling:false 选项，因为其他选项可能会产生进一步的连锁反应。

【讨论】：

在哪里添加 $enable-smooth-scroll: false;在实际的scss文件中？我正在使用引导程序包和 Gatsby，然后导入 dist 文件。知道我该怎么做吗？

【解决方案2】：

这个问题被称为Scroll Restoration。 @reach/router（从 Gatsby 扩展其路由的地方）自动处理它。但是，在某些情况下，它会失败，尤其是在渲染具有自己的滚动值的容器时。为了绕过这个“问题”，Gatsby 暴露了一个useScrollRestoration 钩子来恢复滚动位置。例如：

import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"

export default function PageComponent() {
  const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)

  return (
    <ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
      {countryList.map(country => (
        <li>{country}</li>
      ))}
    </ul>
  )
}

因此，在您的目标组件（/aboutme/ 页面）中，使用外部包装器中的 useScrollRestoration 挂钩来恢复滚动位置。

【讨论】：

感谢您的回复，但它对我不起作用。我正在使用布局包装器，因此我已将钩子放在那里，但在运行 gatsby develop 时收到警告：warn "export 'default' (imported as 'useScrollRestoration') was not found in 'gatsby' ...并且页面未呈现。我尝试将钩子直接包含在 /aboutme/ 页面中，但尽管页面呈现，但滚动到顶部的问题并未解决。我将在下面包含布局代码。
当页面不渲染时，会报如下错误：TypeError: Object(...) is not a function针对下面的代码行const aboutMeScrollRestoration = useScrollRestoration('page-component-main')
好吧，如果导入失败，那就不行了。在尝试修复它升级 Gatsby 的版本时，请尝试查看此线程 github.com/gatsbyjs/gatsby/issues/19488
useScrollRestoration(page-component-main) 必须是元素的类。
我不明白你的意思。 'page-component-main' 是否需要引用特定的东西？如果是这样，那是如何工作的？对不起，这一切都很新！将 gatsby 更新到 3.0 仍然遇到同样的问题。

【解决方案3】：

我创建了一个 custom.scss 文件并将其导入到 gatsby-browser.js 文件中。 scss 文件的内容覆盖了 bootstrap 中滚动行为的默认值：

$enable-smooth-scroll: false;
:root {
  scroll-behavior: auto !important;
}
@import "node_modules/bootstrap/scss/bootstrap";

【讨论】：