滚动条宽度怎么设置(如何去掉滚动条的宽度)

编程之家2026-06-281039次浏览

这篇文章给大家聊聊关于滚动条宽度怎么设置，以及如何去掉滚动条的宽度对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

不行的，css做不到，css只支持改下滚动条颜色什么的，而且好像只有ie支持(貌似wk的浏览器也有改滚动条颜色的专用样式，我不确定，只是有印象见哪里说过)。

要改宽度，你只能用css隐藏掉默认滚动条，然后用javascript来模拟滚动条，那个你话样子的想怎么改都怎么改。

百度：js模拟滚动条、jq模拟滚动条，之类的关键词。

1、<divstyle="height:300px;width:100px;overflow:auto"><div/>（height和width根据需求设定）

注意:如果只写height就只有垂直滚动条，只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于300px就会出现滚动条，小于300px就没有滚动条。同理，如果宽度大于100px出现滚动条，小于就没有。

2、你也可以将overflow设置为scroll，即:<divstyle="height:300px;width:100px;overflow:scroll"><div/>。这样设定的效果为

不管你的页面高度大于还是小于300px,都会出现滚动条，宽度同理。

3、也可以这样设置

水平滚动条：<divstyle="width:100px;overflow-x:auto"></div>

垂直滚动条：<divstyle="height:300px;overflow-y:auto"></div>

水平加垂直：<divstyle="width:100px;height:300px;overflow-x:auto;overflow-y:auto"></div>

扩展资料

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用id或class来标记<div>，那么该标签的作用会变得更加有效。

注释：<div>是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。

提示：请使用<div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。

参考资料：百度百科div

举个栗子:

没有滚动条的效果图：

上面为灰色是 container灰色块， item为里面的小方块，图为四个一排的列表，当 item超过4个，就会超出父元素高度， container就会产生滚动条。要求是灰色容易左右两边留白一样，中间子元素的间距相等。

未产生滚动条 container容器的内容宽度是420px- 40px= 380px(父元素的宽度减去左右padding的宽度)。剩余的宽度 380px- 360px= 20px margin-right的值就为 calc(20px/ 3)。

但是如果是产生滚动条，内容的宽度要再减去14px,是366px。如果这样设置margin-right: calc(20px/ 3)有滚动条的情况下，第四个元素会挤到第二排。所以 item的样式margin-right不能给出固定的值。

解决1.新属性overlay

chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持

看起来的效果像是在滚动条显示padding的空白里，没有挤压到内容区域。

有滚动条的效果:

解决2.使用100%

设置100%指的是可用宽度，是不含滚动条的宽度,

这样子设置之后，在有滚动条和滚动条时，margin-right计算的值不同。

有滚动条的效果：

滚动条宽度怎么设置和如何去掉滚动条的宽度的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！