2023年6月20日发(作者：)

css超出显⽰滚动条的三种⽅法⽅法1：计算滚动条宽度并隐藏起来

......
.outer-container{ width: 360px; height: 200px; position: relative; overflow: hidden;}.inner-container{ position: absolute; left: 0; top: 0; right: -17px; bottom: 0; overflow-x: hidden; overflow-y: scroll;}注释：这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我⼿动调试得来的。在chrome和IE没发现问题。⽅法2：使⽤三个容器包围起来，不需要计算滚动条的宽度这个⽅法相对于⽅法1多加了⼀个盒⼦，将内容限制在盒⼦⾥⾯了，这样就看不到滚动条的同时也可以滚动。
......
.element, .outer-container { width: 200px; height: 200px;}.outer-container { border: 5px solid purple; position: relative; overflow: hidden;}.inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll;}.inner-container::-webkit-scrollbar { display: none;}⽅法3：⾃定义滚动条的伪对象选择器::webkit-scrollbar这种⽅法不兼容IE,做移动端的可以使⽤。.element::-webkit-scrollbar { width: 0 !important }　　IE 10+.element { -ms-overflow-style: none; }　　t { overflow: -moz-scrollbars-none; }详情：　　以下为⾃定义webkit滚动条样式使⽤⾕歌Chrome浏览器的最新版本，滚动条样式已经是⾮常漂亮了。这个webkit-scrollbar仅适⽤于webkit内核。webkit属性::-webkit-scrollbar { /* 1 */ }::-webkit-scrollbar-button { /* 2 */ }::-webkit-scrollbar-track { /* 3 */ }::-webkit-scrollbar-track-piece { /* 4 */ }::-webkit-scrollbar-thumb { /* 5 */ }::-webkit-scrollbar-corner { /* 6 */ }::-webkit-resizer { /* 7 */ }使⽤实例::-webkit-scrollbar {width: 12px;}::-webkit-scrollbar-track {background-color: #eaeaea;border-left: 1px solid #ccc;}::-webkit-scrollbar-thumb {background-color: #ccc;}::-webkit-scrollbar-thumb:hover {background-color: #aaa;}::-webkit-scrollbar-thumb:active{background-color:#333;}不同状态:horizontal//horizontal伪类适⽤于任何⽔平⽅向上的滚动条:vertical//vertical伪类适⽤于任何垂直⽅向的滚动条:decrement//decrement伪类适⽤于按钮和轨道碎⽚。表⽰递减的按钮或轨道碎⽚，例如可以使区域向上或者向右移动的区域和按钮:increment//increment伪类适⽤于按钮和轨道碎⽚。表⽰递增的按钮或轨道碎⽚，例如可以使区域向下或者向左移动的区域和按钮:start//start伪类适⽤于按钮和轨道碎⽚。表⽰对象（按钮 轨道碎⽚）是否放在滑块的前⾯:end//end伪类适⽤于按钮和轨道碎⽚。表⽰对象（按钮 轨道碎⽚）是否放在滑块的后⾯:double-button//double-button伪类适⽤于按钮和轨道碎⽚。判断轨道结束的位置是否是⼀对按钮。也就是轨道碎⽚紧挨着⼀对在⼀起的按钮。:single-button//single-button伪类适⽤于按钮和轨道碎⽚。判断轨道结束的位置是否是⼀个按钮。也就是轨道碎⽚紧挨着⼀个单独的按钮。:no-buttonno-button伪类表⽰轨道结束的位置没有按钮。:corner-present//corner-present伪类表⽰滚动条的⾓落是否存在。:window-inactive//适⽤于所有滚动条，表⽰包含滚动条的区域，焦点不在该窗⼝的时候。::-webkit-scrollbar-track-piece:start {/*滚动条上半边或左半边*/}::-webkit-scrollbar-thumb:window-inactive {/*当焦点不在当前区域滑块的状态*/}::-webkit-scrollbar-button:horizontal:decrement:hover {/*当⿏标在⽔平滚动条下⾯的按钮上的状态*/}

2023年6月20日发(作者：)

css超出显⽰滚动条的三种⽅法⽅法1：计算滚动条宽度并隐藏起来

......
.outer-container{ width: 360px; height: 200px; position: relative; overflow: hidden;}.inner-container{ position: absolute; left: 0; top: 0; right: -17px; bottom: 0; overflow-x: hidden; overflow-y: scroll;}注释：这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我⼿动调试得来的。在chrome和IE没发现问题。⽅法2：使⽤三个容器包围起来，不需要计算滚动条的宽度这个⽅法相对于⽅法1多加了⼀个盒⼦，将内容限制在盒⼦⾥⾯了，这样就看不到滚动条的同时也可以滚动。
......
.element, .outer-container { width: 200px; height: 200px;}.outer-container { border: 5px solid purple; position: relative; overflow: hidden;}.inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll;}.inner-container::-webkit-scrollbar { display: none;}⽅法3：⾃定义滚动条的伪对象选择器::webkit-scrollbar这种⽅法不兼容IE,做移动端的可以使⽤。.element::-webkit-scrollbar { width: 0 !important }　　IE 10+.element { -ms-overflow-style: none; }　　t { overflow: -moz-scrollbars-none; }详情：　　以下为⾃定义webkit滚动条样式使⽤⾕歌Chrome浏览器的最新版本，滚动条样式已经是⾮常漂亮了。这个webkit-scrollbar仅适⽤于webkit内核。webkit属性::-webkit-scrollbar { /* 1 */ }::-webkit-scrollbar-button { /* 2 */ }::-webkit-scrollbar-track { /* 3 */ }::-webkit-scrollbar-track-piece { /* 4 */ }::-webkit-scrollbar-thumb { /* 5 */ }::-webkit-scrollbar-corner { /* 6 */ }::-webkit-resizer { /* 7 */ }使⽤实例::-webkit-scrollbar {width: 12px;}::-webkit-scrollbar-track {background-color: #eaeaea;border-left: 1px solid #ccc;}::-webkit-scrollbar-thumb {background-color: #ccc;}::-webkit-scrollbar-thumb:hover {background-color: #aaa;}::-webkit-scrollbar-thumb:active{background-color:#333;}不同状态:horizontal//horizontal伪类适⽤于任何⽔平⽅向上的滚动条:vertical//vertical伪类适⽤于任何垂直⽅向的滚动条:decrement//decrement伪类适⽤于按钮和轨道碎⽚。表⽰递减的按钮或轨道碎⽚，例如可以使区域向上或者向右移动的区域和按钮:increment//increment伪类适⽤于按钮和轨道碎⽚。表⽰递增的按钮或轨道碎⽚，例如可以使区域向下或者向左移动的区域和按钮:start//start伪类适⽤于按钮和轨道碎⽚。表⽰对象（按钮 轨道碎⽚）是否放在滑块的前⾯:end//end伪类适⽤于按钮和轨道碎⽚。表⽰对象（按钮 轨道碎⽚）是否放在滑块的后⾯:double-button//double-button伪类适⽤于按钮和轨道碎⽚。判断轨道结束的位置是否是⼀对按钮。也就是轨道碎⽚紧挨着⼀对在⼀起的按钮。:single-button//single-button伪类适⽤于按钮和轨道碎⽚。判断轨道结束的位置是否是⼀个按钮。也就是轨道碎⽚紧挨着⼀个单独的按钮。:no-buttonno-button伪类表⽰轨道结束的位置没有按钮。:corner-present//corner-present伪类表⽰滚动条的⾓落是否存在。:window-inactive//适⽤于所有滚动条，表⽰包含滚动条的区域，焦点不在该窗⼝的时候。::-webkit-scrollbar-track-piece:start {/*滚动条上半边或左半边*/}::-webkit-scrollbar-thumb:window-inactive {/*当焦点不在当前区域滑块的状态*/}::-webkit-scrollbar-button:horizontal:decrement:hover {/*当⿏标在⽔平滚动条下⾯的按钮上的状态*/}