关于css:滚动条样式设置方法

40次阅读

共计 1546 个字符,预计需要花费 4 分钟才能阅读完成。

::-webkit-scrollbar 应用属性阐明 详情见:::-webkit-scrollbar

::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条款式。

备注:如果没有设置 overflow:scroll;,元素的滚动条将不会显示。

备注:::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器(例如,Chrome、Edge、Opera、Safari、iOS 上所有的浏览器,以及其余基于 WebKit 的浏览器)上可用。滚动条款式的规范办法可用于 scrollbar-color 和 scrollbar-width。

CSS 滚动条选择器

你能够应用以下伪元素选择器去批改基于 webkit 的浏览器的滚动条款式:

  • ::-webkit-scrollbar——整个滚动条。
  • ::-webkit-scrollbar-button——滚动条上的按钮(高低箭头)。
  • ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
  • ::-webkit-scrollbar-track——滚动条轨道。
  • ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道局部。
  • ::-webkit-scrollbar-corner——当同时有垂直滚动条和程度滚动条时交汇的局部。通常是浏览器窗口的右下角。
  • ::-webkit-resizer——呈现在某些元素底角的可拖动调整大小的滑块。

CSS 应用示例

实用所有能够滚动的元素间接 ::-webkit-scrollbar 结尾

/* 1, 滚动条 */
::-webkit-scrollbar {
width: 15px; /* 纵向滚动条 宽度 */
height: 15px; /* 横向滚动条 高度 */
background: blue; /* 整体背景 */
border-radius: 10px; /* 整体 圆角 *
}
/* 2, 滚动条两端的按钮 */
::-webkit-scrollbar-button{
width: 15px; /* 横向滚动条 宽度 */
height: 15px; /* 纵向滚动条 高度 */
background: black;
border-radius: 10px;
}
/* 3, 外层轨道 */
::-webkit-scrollbar-track {
/* background: red; */
border-radius: 10px;
}
/* 4. 内层轨道,它会笼罩外层轨道的款式。*/
::-webkit-scrollbar-track-piece {
width: 5px;
background-color:red;
margin: 0 -2px 0;
}
/* 5, 滑块 */
::-webkit-scrollbar-thumb {
background: #bec5ca;
min-height: 50px;
min-width: 50px;
border-radius: 10px;
}
/* 纵向滑块悬浮 */
::-webkit-scrollbar-thumb:vertical:hover {background: yellow;}
/* 横向滑块悬浮 */
::-webkit-scrollbar-thumb:horizontal:hover {background: pink}
/* 6, 边角,两个滚动条交汇处 */
::-webkit-scrollbar-corner{background: blue;}

只实用于特定的局部,须要在选择器之前附加元素,增加一个类名,比方

.part::-webkit-scrollbar {
width: 15px; /* 纵向滚动条 宽度 */
height: 15px; /* 横向滚动条 高度 */
background: blue; /* 整体背景 */
border-radius: 10px; /* 整体 圆角 *
}

正文完
 0