如何从我的网站中删除滚动条？变通方法不起作用

Posted 2023-03-07

【中文标题】如何从我的网站中删除滚动条？变通方法不起作用

【英文标题】：How to remove the scrollbar from my website ? Work arounds didn't work

【发布时间】：2021-10-26 15:48:14

【问题描述】：

我正在使用 React 框架来设计网站。该网站设计精良且完整。现在我看到我的网站正在滚动 y 轴。我见过像溢出一样的工作：隐藏但屏幕设计会受到影响，因为它在顶部和底部都有边距。有谁能看一下，告诉我答案吗？

GitHub 链接： https://github.com/sandeyshc/ACME-frontend

网站链接： https://6127a673da25ff00079834e6--pedantic-goldberg-0f0184.netlify.app/

App.js

  return(
<div className="grid grid-flow-col grid-rows-1 grid-cols-2 gap-0 helloss col-span-2" style=backgroundColor:'black',padding:'4% 8%', resize:"contain">
  <div className=sizes style=backgroundColor:'#fff'>
  <Login />
  /* style=resizeMode: 'contain' */
  </div>
  <div className="hellosm">
  <img src=logoss/>
  </div>
</div>
  );

App.css

img
  height: 100%;

@media only screen and (max-width: 768px) 
  .hellosm
    display: none !important;
    visibility: hidden !important;

  

【问题讨论】：

我想帮助你。但我在上面的 netlify 网页中没有看到任何滚动条

我看不到滚动条...也许包括您所看到内容的图像以及您所看到的屏幕尺寸

@GeorgeRaveen, DevWithZachary 右边有滚动条，但由于背景是黑色的，所以你看不到它。这是链接ibb.co/CnBmy0k

您的屏幕高度似乎很小。那么你必须减小元素的大小或减少上边距

@GeorgeRaveen 我尝试更改许多元素的高度，但没有成功。你能建议我在哪里改变代码的高度吗？

【参考方案1】：

使用 webkit-scrollbar

html::-webkit-scrollbar 
    display: none;


/* Hide scrollbar for IE, Edge and Firefox */
html
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

【讨论】：

我试过 overflow :hidden 但顶部和底部有填充，所以溢出 :hidden 会在顶部和底部提供不规则填充

你试过 x 和 y 了吗？

是的，但它只会将内容隐藏在正文之外，它不会解决这个问题。

我刚刚更新了我的代码，检查一下，它现在可以工作了