首页 > 解决方案 > 有没有办法从我的网站的每个浏览器中删除滚动条?

问题描述

所以我正在使用React.js构建我的投资组合,但我一直在移除滚动条。我已经分别为父 divoverflow: hiddenoverflow: 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;

标签: javascriptcssreactjssass

解决方案


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

推荐阅读