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



所以我使用 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;
}

最新更新