如何根据页面更改html和body overflow样式。
例如，在about页面上，html溢出是隐藏的，但body不是，然后对于contact页面，body溢出是隐藏的，而html不是
这个问题是由于我在项目中途从香草css切换到Next UI库而引起的。我在寻找最快的解决方案，即使它有点粗糙。
下面是我尝试过的一些伪代码:
<Html lang="en" if aboutpage style={{ overflow: "hidden" } else: style={{ overflow: "scroll" }}>
<Head>{CssBaseline.flush()}</Head>
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
import { useRouter } from "next/router";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: React.Children.toArray([initialProps.styles])
};
}
// const router = useRouter(); //causing an error?
// console.log(router.pathname);
render() {
return (
<Html lang="en" style={{ overflow: 'scroll' }}>
<Head>{CssBaseline.flush()}</Head>
<body style={{ overflow: 'hidden' }}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
谢谢!
我试着写一些伪代码。我不确定如何将条件语句代码更改Html标签和Body样式。
你应该能够通过useEffect()钩子在任何你想要的页面上更新html和body overflow属性。例如，在about页面中，您可以运行以下命令:
// On your about page for example
useEffect(() => {
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "scroll";
}, []);
在页面第一次被渲染后，你可以编辑documentElement的样式，这是html标签和body作为你想要的自定义。