css滚动条的使用

前言:

        css滚动条的使用。

1、使用案例1:背景不要,只展示一个滚动条

如果是默认整体,::就够用了,如果是某个元素,可以  .abc::  ,如果是scss这种的  &::

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0,0,0,0);
}

css滚动条的使用_第1张图片

2、使用案例2:

::-webkit-scrollbar {
  width: 6px;
}
//默认不展示
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,0,0,0);
}
//划过展示,具体写法自己改改
&:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0,0,0,0);
}

3、api:

::-webkit-scrollbar                      //滚动条整体部分
::-webkit-scrollbar-button           //滚动条两端的按钮
::-webkit-scrollbar-track             // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-thumb            //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner           //边角
::-webkit-resizer                          //定义右下角拖动块的样式

4、图示:

css滚动条的使用_第2张图片

兼容IE的参考链接:https://www.cnblogs.com/koley...

css滚动条的使用_第3张图片

css滚动条的使用_第4张图片

你可能感兴趣的:(css,前端)