有时会出现水平滚动条

时间:2021-07-13 07:45:57

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

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

3 个答案:

答案 0 :(得分:0)

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

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

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

添加它以删除滚动功能:

body {
  overflow:hidden;
}

答案 1 :(得分:0)

这里:

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>

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

答案 2 :(得分:0)

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