Fullstack/iboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(V0.2): 看板列内纵向滚动加固 + 滚动时右缘滚动条 (方案 B)
Docker Build and Push / build-image (push) Successful in 1m6s
Details

Browse Source 
- 列体外包 .bcol-main (relative): 叠加自绘细滚动条, 滚动时出现、
  停止约 700ms 后淡出, 宽 3px 不占卡片空间
- bcol-body 补 -webkit-overflow-scrolling/overscroll-behavior,
  高度链显式化 (height:100%), 修真机列内滚不动的问题
- 列头保持固定不随滚动
This commit is contained in:
jif2.zhang
2026-10-25 18:57:35 +08:00
parent fd66c529c2
commit 6bd39aeed2
2 changed files with 47 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/globals.css
+14 -3
View File
@@ -1077,13 +1077,24 @@ body.me-safe-top .app-safe-top { height: 0; }
display: flex; gap: 10px; padding: 0 12px 8px; overflow-x: auto; overflow-y: hidden;
flex: 1 1 auto; min-height: 0; align-items: stretch;
}
.bcol { flex: 0 0 186px; display: flex; flex-direction: column; min-height: 0; }
.bcol-head { display: flex; align-items: center; gap: 5px; padding: 0 2px 7px; flex-shrink: 0; }
.bcol { flex: 0 0 186px; display: flex; flex-direction: column; min-height: 0; }.bcol-head { display: flex; align-items: center; gap: 5px; padding: 0 2px 7px; flex-shrink: 0; }
.bcol-name { font-size: 12px; font-weight: 700; color: #3d4450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcol-cnt { font-size: 11px; color: #999; background: #e8ebef; border-radius: 999px; padding: 0 6px; line-height: 15px; }
.bcol-bind { font-size: 10px; color: var(--color-primary); background: #f0f5ff; border-radius: 4px; padding: 0 4px; margin-left: auto; }
.bcol-bind.off { color: #999; background: #f2f3f5; }
.bcol-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding-bottom: 8px; }
.bcol-body {
flex: 1 1 auto; min-height: 0; height: 100%; overflow-y: auto;
display: flex; flex-direction: column; gap: 7px; padding-bottom: 8px;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* 列体包裹层: 承载右缘滚动条 (滚动时出现, 停止后淡出) */
.bcol-main { flex: 1 1 auto; min-height: 0; position: relative; display: flex; }
.bcol-bar {
position: absolute; right: 1px; width: 3px; border-radius: 2px;
background: rgba(15, 23, 42, .3); opacity: 0; transition: opacity .25s ease;
pointer-events: none; z-index: 3;
}
.bcol-bar.on { opacity: 1; }
.bcol.dragover .bcol-body { background: #eaf2ff; border-radius: 8px; outline: 1.5px dashed var(--color-primary); }
.bcol-empty { font-size: 11px; color: #c0c4cc; text-align: center; padding: 10px 0; }
.bcard {