所以我使用 React 构建我的投资组合.js但我坚持删除滚动条。我已经分别为父级和overflow: scroll
子div尝试了overflow: hidden
,但它不起作用,我已经尝试了Fullpage.js这对我不起作用。
我想从整个网站中完全删除滚动条。你能帮帮我吗?这是我的应用程序.js
~ 这是一个参考站点: http://kuon.space/
import React, { useState } from "react";
import "./App.scss";
import Home from "../home/Home";
import About from "../about/About";
import Skill from "../skill/Skill";
import Project from "../project/Project";
import Contact from "../contact/Contact";
import ThemeContext from "../../common/ThemeContext";
function App() {
const [theme, setState] = useState('darks')
const themeStyle = {
dark:{
background: '#121212',
primary: '#DADADA',
secondary: "#A13251"
},
light:{
background: '#E1E1E1',
primary: '#333333',
secondary: '#008F96'
}
}
return (
<ThemeContext.Provider value={
theme==='light'?
themeStyle.light:
themeStyle.dark
}>
<Home />
<About />
<Skill />
<Project />
<Contact />
</ThemeContext.Provider>
);
}
export default App;
您可以使用 css 隐藏滚动条。但不适用于移动浏览器。
.hide-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-scrollbar::-webkit-scrollbar { /** WebKit */
display: none;
}
另一个解决方案是
.element::-webkit-scrollbar {
width: 0 !important
}
这对我有用。
html{
overflow:hidden;
}