king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(project): 스크롤은 되는데 막대가 안 보이던 문제 — 커스텀 스크롤바 적용

Browse Source 
휠 스크롤은 정상 동작(레이아웃 자체는 문제 없었음) — OS/브라우저의
오버레이(자동숨김) 스크롤바 스타일 때문에 막대가 안 보였던 것. 내 업무/
좌측 프로젝트 목록/보드 패널에 항상 보이는 커스텀 스크롤바(얇은 회색
막대)를 그려 윈도우 설정과 무관하게 고정 표시되게 함.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 23:23:36 +09:00
parent 0a427be054
commit 3596e79096
4 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/project.css
+18
View File
@@ -150,6 +150,24 @@
.pj-side { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; padding-right: 4px; }
.pj-main { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; }
.pj-project-mytasks { min-width: 0; min-height: 0; width: 300px; height: 100%; overflow-y: auto; padding-right: 4px; }
/* 휠 스크롤은 되는데 막대가 안 보인다 — OS/브라우저의 오버레이(자동숨김)
스크롤바 때문(호버해야만 잠깐 보이는 스타일). 여기 자체 스크롤 패널들은
막대가 항상 보이도록 커스텀 스크롤바를 그린다(윈도우 설정과 무관하게
고정 표시). */
.pj-home-side, .pj-project-mytasks, .pj-side, .pj-board {
scrollbar-width: thin; scrollbar-color: #c7c9cf transparent;
}
.pj-home-side::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar,
.pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 8px; height: 8px; }
.pj-home-side::-webkit-scrollbar-track, .pj-project-mytasks::-webkit-scrollbar-track,
.pj-side::-webkit-scrollbar-track, .pj-board::-webkit-scrollbar-track { background: transparent; }
.pj-home-side::-webkit-scrollbar-thumb, .pj-project-mytasks::-webkit-scrollbar-thumb,
.pj-side::-webkit-scrollbar-thumb, .pj-board::-webkit-scrollbar-thumb {
background-color: #c7c9cf; border-radius: 999px;
}
.pj-home-side::-webkit-scrollbar-thumb:hover, .pj-project-mytasks::-webkit-scrollbar-thumb:hover,
.pj-side::-webkit-scrollbar-thumb:hover, .pj-board::-webkit-scrollbar-thumb:hover { background-color: #a7aab3; }
@media (max-width: 1280px) {
.pj-layout { grid-template-columns: 230px 1fr; }
.pj-project-mytasks { display: none; }