如何使用引导程序或 CSS 永远不会出现滚动条

Posted 2023-03-06

【中文标题】如何使用引导程序或 CSS 永远不会出现滚动条

【英文标题】：How to use bootstrap or css for never appear scrollbar

【发布时间】：2021-07-27 19:07:13

【问题描述】：

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

      // 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;
    

例如，我有一个表格，如果内容溢出，只会出现滚动表格，而不会出现这个窗口。

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

【参考方案1】：

我认为你可以简单地使用 CSS 来做到这一点：

::-webkit-scrollbar 
    display: none;

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

【参考方案2】：

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

body 
  height: 100vh;
  overflow: hidden;

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

【参考方案3】：

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

【参考方案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%

在包含我的表格的组件之后

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

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