html设置最⼩宽度滚动条,CSS教程：如何设置⾃动显⽰隐藏
scrollbar滚动条，⾃定。。。
显⽰滚动条
当⼀个div的内容⼤于⽗容器的⼤⼩时，可设置 overflow: scroll ⾃动显⽰滚动条：
div {
width:150px;
height:150px;
overflow:scroll;
}
overflow 更多属性值如下：
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。
inherit
规定应该从⽗元素继承 overflow 属性的值。
对于chrome等浏览器，还可只设置x/y⽅向可见度,⽐如只显⽰垂直⽅向，不显⽰⽔平⽅向的超出内容：
overflow-x: hidden;
overflow-y: auto;
⾃定义样式
Webkit 浏览器，像Chrome，Safari，Opera ⽀持⾮标准⽅法 ::-webkit-scrollbar 来创建⾃定义滚动条。
可以⽤来修改默认浏览器滚动条的样式，不过此⽅法firefox和ie暂不⽀持。实现原理
你可以使⽤以下伪元素来定义滚动条的样式
:
:-webkit-scrollbar 滚动条。
::-webkit-scrollbar-button 滚动条上的按钮(箭头指向上⽅和下⽅)。
::-webkit-scrollbar-thumb 可拖动的滚动⼿柄。
::-webkit-scrollbar 跟踪滚动条的轨道(进度条)。
::-webkit-scrollbar-track-piece 轨道(进度条)未被⼿柄覆盖。
::-webkit-scrollbar-corner 滚动条的底⾓，⽔平和垂直滚动条都在此相交。::-webkit-resizer 可拖动的调整⼤⼩⼿柄，出现在某些元素的底⾓。
代码⽰例
下⾯的代码，创建了⼀个细(10px)⿊的滚动条。
/*Width*/
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/*Track*/
::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
/*Handle*/
::-webkit-scrollbar-thumb {
background-color: #11171a;
border-radius: 10px;
html横向滚动条样式
}
更多⽰例
下⾯是更多⽰例，可任选⼀款使⽤:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。