我正试图将Gatsby网站上的deault滚动条更改为覆盖滚动条，以防止在有/没有滚动条的页面之间导航时页面稍微向左"移动"。
我正在尝试使用此程序包：https://www.npmjs.com/package/overlayscrollbars-react，但是似乎找不到在哪里使用Gatsby中提供的JSX组件？
我尝试过在src/html.js中包装<html>标签，但这不会导致我的网站内容被加载，只是一个白色页面。
我还尝试过在src/html.js中包装其他元素，如<body>，甚至更多在HTML树下工作的元素(在我自己的代码文件中，例如index.tsx(，但没有成功。
有人能为我在GatsbyJS中应该在哪里使用这个组件提供一些见解吗？我仍在试着弄清楚盖茨比是如何布置一切的。
下面显示的是我正在尝试用来显示新滚动条的当前代码。不幸的是，它似乎仍然只是显示默认的滚动条。
index.tsx:
import * as React from "react";
import PageBase from "./PageBase";
export default function Home() {
const navigation = [
{ name: "Home", href: "/", current: true },
{ name: "About", href: "/About/", current: false },
{ name: "My Work", href: "/My-Work", current: false },
{ name: "Contact Me", href: "/Contact", current: false },
];
return (
<>
<PageBase navigation={navigation}>
<p>example content</p>
</PageBase>
</>
);
}
PageBase.tsx:
import * as React from "react";
import NavBar from "../components/nav";
import Footer from "../components/footer";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import "overlayscrollbars/css/OverlayScrollbars.css";
export default function PageBase(props: any) {
return (
<>
<OverlayScrollbarsComponent>
<div className="flex flex-col dark:bg-zinc-800 min-h-screen">
<NavBar navigation={props.navigation}></NavBar>
<main className="flex justify-center mt-5 flex-grow overflow-hidden">
<div className="w-5/6 lg:w-4/6">
{props.children}
<br />
<br />
</div>
</main>
<Footer />
</div>
</OverlayScrollbarsComponent>
</>
);
}
谢谢！
经过大量挖掘，我找到了解决方案。我通过saurabh73找到了一个代码沙盒(https://codesandbox.io/s/github/saurabh73/portfolio-website/tree/master/?file=/src/components/layout/index.js:775-1094(，其使用使用React的CCD_。
useEffect(() => {
OverlayScrollbars(document.body, {
nativeScrollbarsOverlaid: {
initialize: true,
},
callbacks: {
onInitialized: function () {
this.scroll(0);
},
onOverflowChanged: function () {
this.scroll(0);
},
},
});
});
我把它放在我的PageBase组件中——相当于一个普通的盖茨比布局。所以我的新PageBase现在看起来是这样的：
PageBase.tsx:
import React, { useEffect } from "react";
import NavBar from "../components/nav";
import Footer from "../components/footer";
import "overlayscrollbars/css/OverlayScrollbars.css";
import OverlayScrollbars from "overlayscrollbars";
export default function PageBase(props: any) {
const scrollOptions = {
nativeScrollbarsOverlaid: {
initialize: true,
},
callbacks: {
onInitialized: function () {
this.scroll(0);
},
onOverflowChanged: function () {
this.scroll(0);
},
},
};
useEffect(() => {
OverlayScrollbars(document.body, scrollOptions);
});
return (
<>
<div className="flex flex-col dark:bg-zinc-800 min-h-screen">
<NavBar navigation={props.navigation}></NavBar>
<main className="flex justify-center mt-5 flex-grow">
<div className="w-5/6 lg:w-4/6">
{props.children}
<br />
<br />
</div>
</main>
<Footer />
</div>
</>
);
}