GatsbyJS 覆盖滚动条答案

【问题标题】：GatsbyJS overlay scrollbarsGatsbyJS 覆盖滚动条
【发布时间】：2022-08-16 23:28:22
【问题描述】：

我正在尝试将我的 Gatsby 网站上的默认滚动条更改为覆盖滚动条，以防止在有/没有滚动条的页面之间导航时页面稍微向左移动。

我正在尝试使用这个包：https://www.npmjs.com/package/overlayscrollbars-react，但是似乎找不到在哪里使用 Gatsby 中提供的 JSX 组件？

我尝试将<html> 标签包装在src/html.js 中，但这会导致我的网站内容都没有被加载——只是一个白页。

我还尝试将其他元素（例如<body>）包装在src/html.js 中，甚至更多元素在HTML 树的下方（在我自己的代码文件中，例如index.tsx），但没有运气。

谁能提供一些关于我应该在 GatsbyJS 中使用这个组件的地方的见解？我仍在努力弄清楚盖茨比是如何布置一切的。

谢谢！

标签： javascript html css reactjs gatsby

【解决方案1】：

鉴于常见的 Gatsby 项目结构，其中大部分页面都由 Layout component 包装，一个好的入口点可能是在那里使用它：

import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import "overlayscrollbars/css/OverlayScrollbars.css";

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <OverlayScrollbarsComponent>
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: `var(--size-content)`,
          padding: `var(--size-gutter)`,
        }}
      >
        <main>{children}</main>
        <footer
          style={{
            marginTop: `var(--space-5)`,
            fontSize: `var(--font-sm)`,
          }}
        >
          © {new Date().getFullYear()} &middot; Built with
          {` `}
          <a href="https://www.gatsbyjs.com">Gatsby</a>
        </footer>
      </div>
    </OverlayScrollbarsComponent>
  )
}

注意我还导入了import "overlayscrollbars/css/OverlayScrollbars.css"; 在布局中，作为 global styling 和所需的 CSS 文件。

【讨论】：