移除滚动条,就像使用了overflow:hidden一样,但是需要保持可见。

10
当您将浏览器缩小至1000像素宽度时,会出现水平滚动条,有没有办法在1000像素以上移除它?请查看我下面的屏幕截图。尝试过clearfix,但并没有起到作用,也尝试了overflow:visible;。
.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

有没有简单易懂的 CSS 方法来解决这个问题?


1
我不理解这个问题,你所说的“移除1000像素以上”是什么意思?如果窗口宽度超过1000像素,滚动条会自动消失。 - Sven Rojek
1
可能是大宽度的主体没有水平滚动条的重复问题。 - Sven Rojek
请查看我的屏幕截图,我的图片需要可见,但滚动条需要在1000像素宽度处。当我使用1020像素宽的浏览器时,会出现滚动条。它需要像背景图片一样。overflow:hidden通常可以使用,但是图片需要可见。Overflow hidden会移除滚动条,而overflow visible则不会 :( - user123
问题在于背景图片需要比1000像素更宽的宽度。因此,如果仍然要显示所有图像,则必须缩小所有图像...否则使用overflow-x。 - Sven Rojek
4个回答

6
@media all and (min-width: 1000px) {
body {
  margin:0;
}
.wrapper {
  overflow-x: hidden;
  }
}

如果浏览器宽度大于1000像素,就不会出现水平滚动条。

嗯,愚蠢的我没有想到那个,这可能是一个解决方案。谢谢你。我仍然想知道是否有其他方法可以使用CSS来完成这个任务。它应该是媒体最大宽度1000像素吗?所以所有小于1000像素的地方都将设置为溢出隐藏。 - user123
你是正确的,我使用了另一种更喜欢的方法,因为当浏览器较小时,我可以使用overflow hidden。 - user123

1

你唯一能做的事情(同时保持站点可访问性),就是设置出现滚动条的宽度。

你可以通过为 body 设置最小宽度来解决这个问题。

在样式表中添加以下内容:

body { min-width: 1200px; }

当浏览器调整到小于1200像素时,将会出现滚动条。

1
我已经决定当我的浏览器小于1200像素时,可以使用carousel上的overflow:hidden;,该carousel宽度为1000像素。 Vladislav Stanic指引了我正确的方向,感谢大家。
@media all and (max-width: 1200px) {
   .carousel {
        overflow-x: hidden;
   }
}

0
使用overflow-x属性来隐藏创建水平滚动的div上的水平滚动条。
例如, Overflow-x:hidden; 编辑
如果您想要1000px的滚动条不出现,但它仍然在1020处出现,那么情况是您在某个地方应用了填充/边距,这些填充/边距占用了额外的像素。您需要将其删除以使您的内容正常工作。

然后其他的图片就再也看不见了,这些图片需要可见但不要出现滚动条。 - user123
如果你想要一个不出现滚动条的1000像素,但实际上在1020像素处还是出现了滚动条,那么问题就在于你在某个地方应用了填充/边距,这些额外的像素被占用了。你需要将其移除以使你的东西正常工作。- @marcoverflow - Nitesh

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接