如何使用 bootstrap 或 css 从不出现滚动条

Question

问题在标题中，在 React 应用程序上，我希望永远不会看到 window 滚动条，我希望每个屏幕尺寸的内容都不会溢出。

      // App.js
      <BrowserRouter>
        <div className="site">
          <Navbar/>
          ...
          // some routes
        </div>
      </BrowserRouter>
      <footer></footer>

      //App.css
     * {
         box-sizing: border-box !important;
     }

    .site {
        height: 100%;
        margin-bottom: -40px;
    }

    footer {
       height:40px;
       background-color:red;
    }

例如，我有一个table，如果内容溢出，只会出现滚动条table，而不会出现window。

   <div style={{maxHeight:"70vh", overflowY:"auto"}}>
     <table>
     ...
     </table>
   </div>
```

Answer 1

我想你可以简单地用 CSS 来做，比如 :

::-webkit-scrollbar {
    display: none;
}

如果你不能用这个，玩一下溢出，对我来说这是唯一的答案。

Answer 2

为防止溢出，您可以禁用 body 元素的溢出。

body {
  height: 100vh;
  overflow: hidden;
}

隐藏滚动条时，不仅要记住chrome，还要记住firefox和safari。

Answer 3

当我说永远看不到滚动条时，我只想调整每个屏幕的高度属性而不是仅遮盖它。

Answer 4

为了解决它，我将我的网站包装在 div

// App.js
<div className="site">
  <Navbar/> //navbar component
  <BrowserRouter>
    <Switch> // from react router dom
      <Route/> // some many routes
   ...
</div>

// App.css
.site {
  height:100%
}

在包含我的 table

的组件之后

<Container style={{height:"calc(100% - 120px)", display:"flex", flexDirection:"column"}}>
  <div style={{overflowY:"auto"}}>
    <Table>
    ...

我希望这个答案可以帮助其他开发者

如何使用 bootstrap 或 css 从不出现滚动条

How to use bootstrap or css for never appear scrollbar

css

html-table

reactjs

react-bootstrap

bootstrap-4