javascript - 有没有办法从我的网站的每个浏览器中删除滚动条?
问题描述
所以我正在使用React.js构建我的投资组合,但我一直在移除滚动条。我已经分别为父 divoverflow: hidden
和overflow: scroll
子 div 尝试过,但它不起作用,我尝试过Fullpage.js对我不起作用。
我想从整个网站中完全删除滚动条。请你帮助我好吗?这是我的App.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
}