滚动条宽度到底是多少？

相信不管是web前端还是后台的程序员，都讨厌网页水平方向出现滚动条。而要避免出现水平滚动条，计算宽度是必不可少的。而在设计过程中，设计师一般避免计算这个右侧滚动条的宽度。为了避免出现水平滚动条，而将宽度设为比具体分辨率少五六十像素的宽度。如YUI推荐的宽度750px对800600的分辨率，950px或974px对1024768的分辨率。一般认为：这个滚动条的宽度为20px，那窗口右侧的滚动条的宽度究竟是不是20px呢，在不同的主流浏览器上是不是一样的呢？

我把显示分辨率从1440*900调到800*600，用如下的css和html简单的做了一下测试。

html：

<div id="content">
    <span>用于测试的div。</span>
</div>

css：

*{margin:0;padding:0;}
#content{width:780px;height:600px;background-color:#ccc;margin:0 auto;}

结果ie7上没有水平滚动条（width为781px有），而在ie6和firefox2上都出现了水平滚动条。如果是20px的话，就应该不会出现水平滚动条啊。于是我将#content的width属性减小。当改为776px时，firefox2中水平滚动条恰好不见了，而ie6依然有。当改为772px时，ie6中的水平滚动条也恰好没有了，firefox2当然也没有了。难道ie6下浏览器窗口右侧的滚动条为28px，firefox2中是24px，ie7下为20px？

如果将窗口最大化右会是怎样的呢？

于是，我按“F11”键，再次调整#content的width属性。结果，在firefox2和ie7中为784px时，恰好没有水平滚动条了，而在ie6中，为788px时，恰好没有水平滚动条了。

如果最大化，那么ie6中右侧滚动条为12px，ie7和firefox2为16px，是这样吗？

可以下结论了？问了问室友兼战友rainman，他做的一个项目的首页是1000px宽的。当他把宽度调为1003px时在ie6中就没有了水平滚动条。难道在不同分辨率下，右侧滚动条的宽度右不相同吗。

于是，把分辨率调到1024*768，将#content的width改为1004px为默认宽度。此时要注意一个问题，就是高度也要调大，要不然在firefox中就不会出现窗口右侧的滚动条。

结果在ie6、ie7和firefox2上都没有了水平滚动条。再次调大，当为1005px时，ie6和ie7就都出现了水平滚动条，调到1008px时，firefox2下恰好没有了滚动条。

汲取上一次经验，再次把窗口最大化。确定，1008px时，ie7和firefox2正好没有水平滚动条；1012px时，ie6正好没有水平滚动条。

做到这里，也就豁然开朗了。虽然现在的网页宽度没有也没有必要大于1024px，

但还是忍不住，做一下宽度为1280px和1440px分辨率的。

现在把结果总结为下表：

屏幕分辨率（宽度）	IE6（滚动条宽度，下同）		IE7		Firefox2
屏幕分辨率（宽度）	标准	最大化	标准	最大化	标准	最大化
800px	28px	12px	20px	16px	24px	16px
1024px	20px	12px	20px	16px	16px	16px
1280px	20px	12px	20px	16px	16px	16px
1440px	20px	12px	20px	16px	16px	16px

可以看出，在1024px宽度以上，各个浏览器的滚动条的宽度都是没变的。从这个表里，相信你会看到更多的东西。如果时间充裕，下次会测试一下Opera的。

滚动条宽度到底是多少？相关推荐

【原创】告别恼人的水平滚动条——滚动条宽度到底是多少？
相信不管是web前端还是后台的程序员,都讨厌网页水平方向出现滚动条.而要避免出现水平滚动条,计算宽度是必不可少的.而在设计过程中,设计师一般避免计算这个右侧滚动条的宽度.为了避免出现水平滚动条,而将宽 ...
获取滚动条宽度代码（记录）
1.创建一个嵌套节点,让外层节点产生滚动条. 2.用offsetWidth - clientWidth 即可获得滚动条宽度. 为了避免页面抖动,可以设置外层元素position:absolute和 ...
VC修改IE滚动条宽度
VC下修改IE滚动条宽度,修改滚动条颜色是一个很简单的问题.但是IE的滚动条的宽度则是一件麻烦事,可能很多人遇到过这个问题.通过我一段时间的研究发现,IE浏览器的滚动条宽度是读取系统的滚动条默认宽度创 ...
获取浏览器原生滚动条宽度的方法
2019独角兽企业重金招聘Python工程师标准>>> 整体思路就是往body中插入一个div,div中再嵌套一个div,设置外部的div的overflower为scroll, 这样 ...
css滚动条占了宽度,css – 计算定位元素时的滚动条宽度
我有一个最大宽度的布局,当屏幕宽度大于最大值时,它是水平居中的.布局包括一个固定的标题&菜单;当屏幕宽度小于最大值时,菜单的左侧位置为0,并且当屏幕宽度超过最大值时,菜单的左侧位置需要与布局的 ...
html如何获取滚动条,js如何来实现获取滚动条宽度（代码示例）
本篇文章给大家带来的内容是关于js如何来实现获取滚动条宽度(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 思路:通过创建一个元素,不要给元素设置边框,然后给元素设置ove ...
获取整个页面包括滚动条的宽度，获取滚动条宽度
更正!!!!!!!! 下面的代码没用了, 今天看到了 window.outerWidth 这个属性,直接就能取到整个页面包括滚动条的宽度:评论说 window.innerWidth 才是对的, 刚刚 ...
浏览器宽度以及滚动条宽度计算
在获取页面宽度的时候从网上找到如下方法: getClientWidth() {let clientWidth = 0;if (document.body.clientWidth && ...
获取滚动条宽度(Element-UI之三)
获取滚动条宽度(Element-UI之三) 代码如下 /*** 计算浏览器滚动条宽度* @returns {Number}*/ export default function () {const ou ...

滚动条宽度到底是多少？

滚动条宽度到底是多少？相关推荐

最新文章

热门文章