有时会出现水平滚动条答案

【问题标题】：Horizontal scrollbar appears sometimes有时会出现水平滚动条
【发布时间】：2021-09-22 06:33:06
【问题描述】：

我想从我的网页中删除水平滚动条。为此我使用溢出-x 属性和我写的伪元素属性 webkit-scrollbar 显示 none.But 问题当我缩小我的网页时，有时仍然存在。就像我写属性 over-flow-x 一样：隐藏然后在第一次缩小屏幕时，水平滚动条不会显示但在第二次缩小屏幕时出现。这是我面临的问题。请尽快给我一个合适的解决方案。
谢谢。

【问题讨论】：

您能阻止一些代码以便我们更轻松地为您提供帮助吗？
你可以使用overflow-x:hidden;正文 css 中的属性

标签： html css overflow image-resizing horizontal-scrolling

【解决方案1】：

使用它来隐藏滚动条并保留功能：

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

body {
  -ms-overflow-style: none;
  scrollbar-width: none;=
}

添加此项以移除滚动功能：

body {
  overflow:hidden;
}

【讨论】：

不会隐藏垂直滚动条

【解决方案2】：

这里：

html, body {
  overflow-x: hidden;
}

.overflow {
  width: 150vw;
}

<div class = 'overflow'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed ipsum in sapien sagittis pulvinar. Cras ornare massa urna, in volutpat quam feugiat sit amet. Sed in purus efficitur justo vestibulum scelerisque. Integer euismod ligula a nisl ornare, vel viverra mi mattis. Mauris dolor diam, tempus a risus in, malesuada fringilla tellus. Vivamus ultrices nisi non massa ultrices mollis at vitae neque. Vivamus viverra fringilla elit, eu suscipit libero dictum nec. Quisque lacinia mattis rutrum.
Aliquam ut dignissim magna. In eget maximus libero. Donec id velit vitae libero ultricies consectetur. Duis in tortor mattis, venenatis elit sit amet, iaculis ligula. Sed pulvinar nisi ut leo sollicitudin tempor. Ut nec erat sed nisl blandit efficitur. Donec varius sem vitae leo tincidunt, sed pretium tortor tempus. Morbi tempor sollicitudin sapien eget sollicitudin. Fusce maximus quis risus ac pretium. Duis non elit nec neque consectetur interdum vitae at lorem. Proin elementum sem justo, non congue orci cursus in. Nulla ac feugiat augue. Cras augue lorem, pretium non velit non, pulvinar accumsan dui.
</div>

如果这不起作用，那么您必须发布您的代码让我们修复它。

【讨论】：

【解决方案3】：

您是否为此设置了边距？除了你给定的代码是完美的。如果要删除滚动条，则视图宽度应根据显示或给出宽度，您可以使用 max-width : 100%

【讨论】：