html自定义滚动条样式 div滚动条设置方法

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

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
【html自定义滚动条样式 div滚动条设置方法】auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

效果如下：

文章插图

文章插图
定制
上面是经过定制的，所以不会隐藏。
.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 ，建议没有用过或者忘了的小伙伴保存一下，一定会再次用到的。