动态修改滚动条样式

  • Z时代
  • 2024-02-08
  • 分类：IT

动态修改滚动条样式

通过下面css代码修改了滚动条样式（谷歌），有一个换皮肤的需求，切换页面皮肤后，滚动条样式也想修改成符合皮肤色调的，如何修改的，大佬给点思路

/* 滚轮改变 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  // background-color: #864f58;
  background-color: #283646;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

回答：

你换肤后其他的css怎么改的就也怎么改呗，比如应用class在body上，通过后代选择器去修改
DEMO

以上是 动态修改滚动条样式 的全部内容， 来源链接： utcz.com/p/937070.html

回到顶部