fix: 标签栏滚轮滚动重写

- wheel 事件直接绑定到 #tab-list 元素(而非父容器)
- 支持触控板 deltaX 和鼠标滚轮 deltaY
- 自动滚动到活动标签改为手动计算位置(不依赖 scrollIntoView)
- CSS: #tab-bar 添加 overflow: hidden 防止溢出
- CSS: 滚动条更明显(4px 高,灰色轨道)
This commit is contained in:
thzxx
2026-05-28 15:10:46 +08:00
parent 531e4bdbc3
commit 3294dd585c
2 changed files with 47 additions and 44 deletions
+7 -8
View File
@@ -470,7 +470,7 @@ html, body {
align-items: flex-end;
padding: 0 4px;
flex-shrink: 0;
/* 不设置 overflow,由 #tab-list 负责滚动 */
overflow: hidden;
}
#tab-list {
@@ -481,26 +481,25 @@ html, body {
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
/* 平滑滚动 */
scroll-behavior: smooth;
scroll-behavior: auto;
}
/* 标签列表滚动条 */
/* 滚动条样式 */
#tab-list::-webkit-scrollbar {
height: 3px;
height: 4px;
}
#tab-list::-webkit-scrollbar-thumb {
background: var(--border);
background: var(--text-tertiary);
border-radius: 2px;
}
#tab-list::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
background: var(--text-secondary);
}
#tab-list::-webkit-scrollbar-track {
background: transparent;
background: var(--bg-tertiary);
}
#tab-list::-webkit-scrollbar-thumb:hover {