有没有办法从我网站的每个浏览器中删除滚动条？

Question

所以我正在使用React.js构建我的作品集，但我一直坚持删除滚动条。 我已经尝试过overflow: hidden for the parent 和overflow: scroll for the child 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;

Answer 1

您可以使用 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 
}

Answer 2

是的，这很简单。

 html{ overflow:hidden; }