div滚动条宽度

滚动条宽度：22px

额，问题解决了吗，

为毛不直接把滚动条去掉?overflow-y:hidden; overflow-x:hidden;这样不会出现滚动条，你运亩祥宽度也不用去用js计耐哗算的那么精旁搏确了。

Scroll Bar Size

function getScrollbarSize() {

// Create an Outer scrolling div

var dv = document.createElement('div');

dv.style.position = 'absolute';

dv.style.left = '-1000px';

dv.style.top = '-1000px';

dv.style.width = '100px';

dv.style.height = '100px';

dv.style.padding = '0px';

dv.style.margin = '0px';

dv.style.overflow = 'scroll';

dv.style.border = '0px'销梁橘;

// Attach it to the DOM document.body.appendChild(dv);

// Inner div to deform the scrolling div and create a scroll bar

var inn = document.createElement('div');

inn.style.position = 'relative';

inn.style.border = '0px';

inn.style.height = '200px';

inn.style.padding = '0px';

inn.style.margin = '0px';

dv.appendChild(inn);

var scrollbarWidth = 100-inn.offsetWidth;

document.body.removeChild(dv);

return {scrollbarSize:scrollbarWidth};}

function reportOnScrollbars() {

var geo = getScrollbarSize();

var res = "Scroll Bar Size: " ◆ geo.scrollbarSize ◆ "";

document.getElementById('results').innerHTML = res;

}

IE Google Chrome Mozilla Firefox 亲测可用 大致思路是在一个小div里套一个大的div

那么小div自然就会出滚动条 然后用小div的宽度(此例中是100)减去大div的可见宽度就是滚动条的宽度 这是一本外国js大牛写的书里面教的方法

我在此基础上依据他的思路改进了一下 但是我写的方法只在 IE8 Google Chrome Mozilla Firefox 下测过

dv.style.overflow= "scroll";

dv.style.width = "100px";

document.body.appendChild(dv);

var bar_size = 100 - dv.scrollWidth;

return bar_size;

希望对你有所帮助 也期待有哪位提供更好的方法 不用操作添加dom 直接根据属性算出来的

而且浏览器兼容性好的

::-webkit-scrollbar{width:14px;}

::-webkit-scrollbar-track{background-color:#bee1eb;}

::-webkit-scrollbar-thumb{background-color:#00aff0;}

::-webkit-scrollbar-thumb:hover {background-color:#9c3}

::-webkit-scrollbar-thumb:active {background-color:#00aff0}这段代码放倒CSS文件里去，宽度颜纤明色自己修改，且只在webkit内核浏览器下才埋陆生效，就是谷歌浏览器的内核。毁液告

目前只有chrome支持设置滚动条样式，给div设置伪类::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动羡腊条两端的按钮

::-webkit-scrollbar-track 外层轨道厅敏

::-webkit-scrollbar-track-piece 内层滚动槽扮派枝

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式如div::-webkit-scrollbar{

width:4px

以上就是土嘎嘎小编大虾米为大家整理的div滚动条宽度相关主题介绍,如果您觉得小编更新的文章对您有所帮助，不要忘记讲本站分享给您身边的朋友哦！！