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

fix(project): 커스텀 스크롤바가 안 보이던 원인 — 표준 scrollbar-* 속성이 webkit 스타일을 끔

Browse Source 
Chromium 121+ 는 scrollbar-width/scrollbar-color 가 지정되면 ::-webkit-scrollbar
커스텀 스타일을 무시하고 OS 오버레이(자동숨김) 스크롤바로 돌아간다.
DevTools 확인 결과 패널은 이미 scroll 컨테이너(818px)였고 폭이 스크롤바
자리를 전혀 안 차지함 = 오버레이 스크롤바. 표준 속성은 @supports not
selector(::-webkit-scrollbar) 로 Firefox 에만 적용해, 크롬/엣지에서는
항상 보이는 커스텀(클래식) 스크롤바가 그려지게 함.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 23:33:00 +09:00
parent 872a369c7c
commit 17731a195a
4 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/project/templates/project/inbox.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916p" /> <link rel="stylesheet" href="/static/project.css?v=20260916q" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %} {% endblock %}
app/modules/project/templates/project/index.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916p" /> <link rel="stylesheet" href="/static/project.css?v=20260916q" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %} {% endblock %}
app/modules/project/templates/project/project.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916p" /> <link rel="stylesheet" href="/static/project.css?v=20260916q" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host --> <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host --> <!-- 타임라인 vis-timeline — self-host -->
app/static/project.css
+8 -2
View File
@@ -170,8 +170,14 @@
스크롤바 때문(호버해야만 잠깐 보이는 스타일). 여기 자체 스크롤 패널들은 스크롤바 때문(호버해야만 잠깐 보이는 스타일). 여기 자체 스크롤 패널들은
막대가 항상 보이도록 커스텀 스크롤바를 그린다(윈도우 설정과 무관하게 막대가 항상 보이도록 커스텀 스크롤바를 그린다(윈도우 설정과 무관하게
고정 표시). */ 고정 표시). */
.pj-home-side, .pj-home-main, .pj-project-mytasks, .pj-side, .pj-board { /* 주의: Chromium(크롬/엣지) 121+ 는 scrollbar-width/scrollbar-color 가 지정돼
scrollbar-width: thin; scrollbar-color: #b9bcc4 #f1f2f4; 있으면 ::-webkit-scrollbar 커스텀 스타일을 통째로 무시하고 OS 오버레이
(자동숨김) 스크롤바로 돌아간다 — 그래서 표준 속성은 ::-webkit-scrollbar 를
지원하지 않는 브라우저(Firefox)에만 준다. */
@supports not selector(::-webkit-scrollbar) {
.pj-home-side, .pj-home-main, .pj-project-mytasks, .pj-side, .pj-board {
scrollbar-width: thin; scrollbar-color: #b9bcc4 #f1f2f4;
}
} }
.pj-home-side::-webkit-scrollbar, .pj-home-main::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar, .pj-home-side::-webkit-scrollbar, .pj-home-main::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar,
.pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 9px; height: 9px; } .pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 9px; height: 9px; }