效果

代码放到子比主题-全局-自定义CSS样式

/* 渐变蓝色滚动条样式 */

::-webkit-scrollbar {

  width: 7px; /* 滚动条宽度 */

  height: 7px;

}

/* 滚动条轨道 */

::-webkit-scrollbar-track {

  background: #f0f7ff;

  border-radius: 4px;

}

/* 滚动条滑块 - 蓝色渐变 */

::-webkit-scrollbar-thumb {

  background: linear-gradient(

    180deg,

    #90caf9 0%, /* 浅蓝色起点 */

    #64b5f6 30%, /* 中浅蓝色 */

    #42a5f5 60%, /* 亮蓝色 */

    #1e88e5 100% /* 深蓝色终点 */

  );

  border-radius: 4px;

  transition: all 0.2s ease;

}

/* 滑块悬停效果 */

::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(

    180deg,

    #aed5fa 0%,

    #81c3f8 30%,

    #64b5f6 60%,

    #2196f3 100%

  );

  box-shadow: 0 0 5px rgba(66, 165, 245, 0.4);

}

/* 滑块点击效果 */

::-webkit-scrollbar-thumb:active {

  background: linear-gradient(

    180deg,

    #64b5f6 0%,

    #42a5f5 30%,

    #1e88e5 60%,

    #1565c0 100%

  );

}

/* 滚动条角落 */

::-webkit-scrollbar-corner {

  background: #f0f7ff;

}

/* 适配子比主题各区域 */

.post-content::-webkit-scrollbar,

.comment-list::-webkit-scrollbar,

.sidebar-widget::-webkit-scrollbar {

  width: 7px;

}