滚动条

作者: 码农界四爷__King | 来源:发表于2021-05-24 10:26 被阅读0次
body {

  /*scrollbar-arrow-color: #9e1068; !*上下按钮上三角箭头的颜色*!*/
  scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/
  scrollbar-3dlight-color: #00b692; /*滚动条亮边的颜色*/
  /*scrollbar-highlight-color: #333; !*滚动条空白部分的颜色*!*/
  scrollbar-shadow-color: yellow; /*滚动条阴影的颜色*/
  scrollbar-darkshadow-color: green; /*滚动条强阴影的颜色*/
  scrollbar-track-color: #eee; /*滚动条背景颜色*/
  scrollbar-base-color: #e2e2e2; /*滚动条的基本颜色*/
}

::-webkit-scrollbar { /* 滚动条整体部分 */
  width: 2px;
  margin-right: 2px
}

::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
  width: 0;
  height: 0;
}

::-webkit-scrollbar:horizontal {
  height: 2px;
  margin-bottom: 2px
}

::-webkit-scrollbar-track { /* 外层轨道 */
  border-radius: 0;
}

::-webkit-scrollbar-track-piece { /*内层轨道,滚动条中间部分 */
  background-color: #000000;
  border-radius: 0;
}

::-webkit-scrollbar-thumb { /* 滑块 */
  width: 2px;
  border-radius: 0;
  /*background: var(--base-color);*/
  background-color: #FFFFFF40;

}

::-webkit-scrollbar-corner { /* 边角 */
  width: 0;
  /*background-color: red;*/
}

::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
  background-color: #FFFFFF80;
}

相关文章

  • 商品展示特效

    一、水平滚动条 和 垂直滚动条 1.1 核心技术点1)求滚动条的长度? 2)拖动滚动条,求内容要走多少?滚动条的长...

  • js特效-2

    一,水平滚动条和垂直滚动条 1.1技术点 1)求滚动条的长度 2)拖动滚动条,求内容要走多少 ~滚动条的长度取决于...

  • css3的-webkit-scrollbar滚动条特性

    css3 新增的滚动条样式,美化浏览器自带的滚动条 滚动条组成 ::-webkit-scrollbar 滚动条整体...

  • 滚动条

    浏览器滚动条 滚动条的默认样式 css对应着上图的滚动条的图实 ::-webkit-scrollbar 滚动条...

  • 前端笔记(18)

    代码:滚动条: 自定义滚动条

  • js进阶第二天

    一、水平滚动条 和 垂直滚动条 1.1 核心技术点 1)求滚动条的长度? 2)拖动滚动条,求内容要走多少? 滚...

  • js网页特效-2

    js特效 - Day2 一、水平滚动条 和 垂直滚动条 1.1 核心技术点 1)求滚动条的长度? 2)拖动滚动条,...

  • js进阶第二式

    一、水平滚动条 和 垂直滚动条(案例练习总结) 1.1 核心技术点 1)求滚动条的长度? 2)拖动滚动条,求内容要...

  • CSS设置滚动条样式

    CSS设置滚动条样式 一:webkit下面的CSS设置滚动条 ::-webkit-scrollbar 滚动条整体部...

  • 隐藏滚动条小技巧(兼容至IE7)

    关于滚动条的设置 滚动条设置 也可以单独对x和y设置滚动条 滚动条隐藏,且仍然有滚动功能 对于webkit内核可直...

网友评论

      本文标题:滚动条

      本文链接:https://www.haomeiwen.com/subject/mpxxsltx.html