效果

代码放到子比主题-全局-自定义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;
}