Skip to main content

滚动条样式

全局滚动条样式

  • 定义定义亮色主题下的滚动条颜色 src\css\custom.css添加以下代码
:root {
--color-pink-light: rgb(93 168 255); /* 定义亮色主题下的滚动条颜色 */
}

html[data-theme="dark"] {
--color-green-light: #322d31; /* 定义暗色主题下的滚动条颜色 */
}

src\css\custom.css添加以下代码

/* 全局滚动条样式 */
::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
}

::-webkit-scrollbar-track {
border-radius: 2em;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background-color: var(--color-pink-light);
background-image: -webkit-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.4) 25%,
transparent 0,
transparent 50%,
hsla(0, 0%, 100%, 0.4) 0,
hsla(0, 0%, 100%, 0.4) 75%,
transparent 0,
transparent
);
border-radius: 2em;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
background: #aaaaaa;
background-image: -webkit-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.4) 25%,
transparent 0,
transparent 50%,
hsla(0, 0%, 100%, 0.4) 0,
hsla(0, 0%, 100%, 0.4) 75%,
transparent 0,
transparent
);
border-radius: 2em;
}

目录滚动条样式

src\css\custom.css添加以下代码

/* 确保目录容器可滚动 */
.tableOfContents_src-theme-TOC-styles-module {
overflow-y: auto; /* 启用垂直滚动条 */
scrollbar-width: thin; /* Firefox 滚动条宽度 */
scrollbar-color: var(--color-pink-light) transparent; /* Firefox 滚动条滑块和轨道颜色 */
}

/* WebKit 浏览器的滚动条样式 */
.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar {
width: 0.5rem; /* 滚动条宽度 */
}

.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar-thumb {
background: var(--color-pink-light); /* 滚动条滑块的颜色 */
border-radius: 2em; /* 滚动条滑块的圆角 */
}

.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar-thumb:hover {
background: #26c6da; /* 滚动条滑块悬停时的颜色 */
}

/* 尝试隐藏 WebKit 浏览器中的滚动条按钮(上下箭头) */
.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar-button {
display: none; /* 隐藏滚动条按钮 */
}

/* 隐藏滚动条背景 */
.tableOfContents_src-theme-TOC-styles-module::-webkit-scrollbar {
background: transparent; /* 隐藏滚动条背景 */
}

/* 明亮模式样式 */
.tableOfContents_src-theme-TOC-styles-module {
/* 由于不同浏览器兼容性和箭头不能隐藏,直接把整个目录滚动条隐藏了 */
--color-pink-light: #00000000; /* 明亮模式下的滚动条颜色 */
}

/* 暗黑模式样式 */
@media (prefers-color-scheme: dark) {
.tableOfContents_src-theme-TOC-styles-module {
--color-pink-light: #322d31; /* 暗黑模式下的滚动条颜色 */
}
}