进入某组件时让滚动栏隐藏,退出时让滚动栏显示。通过document.styleSheets解决。
注意:document.styleSheets是只读属性,不能新增或者删除,但是可以通过指定方法修改其内部样式规则。
import { useEffect } from 'react';
// 隐藏滚动条钩子函数
export default () => {
useEffect(() => {
// 去掉滚动条
document.styleSheets[0].insertRule(
'body::-webkit-scrollbar { display: none }',
0
);
return () => {
document.styleSheets[0].deleteRule(0);
};
}, []);
};