出滚动讲起

Web 开发中，经常遇到需要固定容器大小，然后内部内容超出的情况，相信非技术的也经常会遇到这样的场景，没错，几乎打开任何一个门户网站你使用鼠标滚轮就属于上面的情况。

解决方案自然就是 overflow 这个 CSS 属性。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

效果如下：

上面是 visible。

上面是 hidden。

上面是 scroll 与 auto。

注意，Chrome 系列浏览器都会自动隐藏滚动条，不论设置 auto 还是 scroll。

因此我们才有今天的话题。

inherit 就不举例了，这个与父元素有关。

强制显示滚动条

首先，scroll 说好的显示，被浏览器给搞掉了。

其次，隐藏是好事毕竟占位置，而且当今的网民基本都本能的知道滚动操作。

最后，个人举四肢赞成自动隐藏。

但是！！！

你总会遇到不怎么上网的网民，在看不到内容时候不知所措。

亦或者，你遇到的坑爹的老板，就是要让你显示（这个老板可能不怎么上网……）。

或者你们产品设计对象就是一些非网民的使用。

又或者你们设计觉得有个自定义滚动条好看。

等等等等情况，相信我，你一定会遇到这个情况的。

于是我们需要定制一个滚动条，放心，CSS 伪类已经给你提供好了。

核心代码由 Steven Lewis：https://codepen.io/stevenlewis/pen/hubpL 提供，本人用到，精简下顺便搬运。

<div class="frame">
 Foo<br />
 Bar<br />
 Baz<br />
 Help I'm trapped in an HTML factory! 
</div>

上面是 HTML 代码。

frame {
 overflow-y: auto;
 border: 1px solid black;
 height: 3em;
 width: 10em;
 line-height: 1em;
}
.frame::-webkit-scrollbar {
 -webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
 width: 11px;
}
.frame::-webkit-scrollbar-thumb {
 border-radius: 8px;
 border: 2px solid white;
 background-color: rgba(0, 0, 0, .5);
}

这里是对应的 CSS 代码。

做了对比动图，大家看一下：

上面是 auto（或 scroll）控制，细节是右边的滚动条会自动隐藏。

上面是经过定制的，所以不会隐藏。

.frame::-webkit-scrollbar {
 -webkit-appearance: none;
}

隐藏默认的滚动条。

.frame::-webkit-scrollbar:vertical {
 width: 11px;
}

设置垂直滚动条宽度。

当然也有水平滚动条配置，.frame::-webkit-scrollbar:horizontal，那么就要设置他的高度的。如下：

.frame::-webkit-scrollbar:horizontal {
 height: 11px;
}

.frame::-webkit-scrollbar-thumb {
 border-radius: 8px;
 border: 2px solid red;
 background-color: rgba(0, 0, 0, .5);
}

滚动条的其他样式定制，注意，这个一定也要定制，否则就是一个透明的滚动条……

OK，建议没有用过或者忘了的小伙伴保存一下，一定会再次用到的。

avascript中制作滚动代码的常用属性

1.网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight;

2.假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。 例如：

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。 “重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。 “提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。 “重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。

以上属性在 FireFox 中也有效。

3.offsetTop 与 style.top 的区别

预备知识：offsetTop、offsetLeft、offsetWidth、offsetHeight 我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

(1)offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 (2)offsetTop 只读，而 style.top 可读写。 (3)如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。 offsetWidth与style.width属性的区别在于：如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.scrollLeft : 对象的最左边到对象在当前窗口显示的范围内的左边的距离． 即是在出现了横向滚动条的情况下，滚动条拉动的距离． scrollTop 对象的最顶部到对象在当前窗口显示的范围内的顶边的距离． 即是在出现了纵向滚动条的情况下，滚动条拉动的距离．