（1）在 PC 端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签。验
证很简单，新建一个空白页面，此时<body>标签的默认 margin 值是.5em，如果滚动条是由
<body>标签产生的，那么效果应该如图 1 所示这般边缘留有间隙。但是最后实现结果却是
图 2所示的这样没有间隙。
图 1 <body>产生滚动条的假想效果 图 2 实际效果无间隙，滚动条由<html>产生
所以，如果我们想要去除页面默认滚动条，只需要：
html { overflow: hidden; }
而没必要把<body>也拉下水：
html, body { overflow: hidden; }
（2）滚动条会占用容器的可用宽度或高度。IE7 及以上版本 IE、Chrome、Firefox
浏览器滚动栏所占据的宽度均是17px，注意，很精准的是17px，
要知道自己浏览器的滚动栏宽度是多少其实很简单，代码如下：
168 第 6 章 流的破坏与保护
.box { width: 400px; overflow: scroll; }
<div class="box">
<div id="in" class="in"></div>
</div>
console.log(400 - document.getElementById("in").clientWidth);
（3）这里分享一个可以让页面滚动条不发生晃动的小技巧，即使用如下 CSS 代码：
html {
overflow-y: scroll; /* for IE8 */
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
基本上药到病除，而且后遗症非常少，大家不妨试试！
（4）滚动条是可以自定义的。因为 IE 浏览器的自定义效果实在是比原生的还要难看，就不浪费
大家时间了，就此打住。
倒是支持-webkit-前缀的浏览器可以说说。例如，对于 Chrome 浏览器：
• 整体部分，::-webkit-scrollbar；
• 两端按钮，::-webkit-scrollbar-button；
• 外层轨道，::-webkit-scrollbar-track；
• 内层轨道，::-webkit-scrollbar-track-piece；
• 滚动滑块，::-webkit-scrollbar-thumb；
• 边角，::-webkit-scrollbar-corner。
但是我们平时开发中只用下面 3 个属性：
::-webkit-scrollbar { /* 血槽宽度 */
width: 8px; height: 8px;
}
::-webkit-scrollbar-thumb { /* 拖动条 */
background-color: rgba(0,0,0,.3);
border-radius: 6px;
}
::-webkit-scrollbar-track { /* 背景槽 */
background-color: #ddd;
border-radius: 6px;
}
在目标浏览器下的滚动条效果就会如图所示这般。
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
