css设置滚动条宽度设置

html-css06

css设置滚动条宽度设置,第1张

/* 设置滚动条的样式 */

::-webkit-scrollbar {

width:12px

}

/* 滚动槽 */

::-webkit-scrollbar-track {

-webkit-box-shadow:inset006pxrgba(0,0,0,0.3)

border-radius:10px

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

border-radius:10px

background:rgba(0,0,0,0.1)

-webkit-box-shadow:inset006pxrgba(0,0,0,0.5)

}

::-webkit-scrollbar-thumb:window-inactive {

background:rgba(255,0,0,0.4)}

多给点分

滚动条和div一样有自己的属性

height:10px

====================

1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容;overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。

参数:

visible:扩大面积以显示所有内容

auto:仅当内容超出限定值时添加滚动条

hidden:总是隐藏滚动条

scroll:总是显示滚动条

2、height : 设置滚动条的高度(修改其后数值即可)。

3、滚动条颜色参数设置:

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色

scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色

scrollbar-face-color 设置或检索滚动条3D表面(ThreedFace)的颜色

scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color 设置或检索滚动条3D界面的暗边(ThreedShadow)颜色

scrollbar-dark-shadow-color 设置或检索滚动条暗边框(ThreedDarkShadow)颜色

scrollbar-base-color 设置或检索滚动条基准颜色

/* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px}

/* 滚动槽 */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3)border-radius: 10px}

/* 滚动条滑块 */::-webkit-scrollbar-thumb { border-radius: 10pxbackground: rgba(0,0,0,0.1)

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5)}

::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4)}