caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(pc): 가로 스크롤바 잡기 어려운 문제 개선

Browse source 
핸들이 7px로 얇고 트랙 클릭(clickScroll)이 기본 꺼져 있어, 핸들을
2~3px 빗나가게 클릭하면 아무 반응이 없어 드래그가 안 되는 것처럼
느껴지던 문제. 스크롤바 14px/핸들 8px로 키우고 ClickScrollPlugin 등록 +
clickScroll 활성화로 트랙 클릭 시에도 스크롤되도록 변경.
헤드리스 브라우저로 핸들 드래그·트랙 클릭 동작 검증 완료.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-06-10 19:26:55 +09:00
parent e5f9ee70ea
commit 6595d55532
3 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/pc/admin/layout/Layout.jsx
View file

@ -4,15 +4,19 @@
* 헤더 고정 + 본문 스크롤 구조
*/
import { useLocation } from 'react-router-dom';
import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { useAuthStore } from '@/stores';
import Header from './Header';
// 트랙 클릭 시 해당 방향으로 스크롤 (핸들을 빗나가게 클릭해도 동작)
OverlayScrollbars.plugin(ClickScrollPlugin);
const OS_OPTIONS = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true },
};
const OS_OPTIONS_X = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true },
overflow: { y: 'hidden' },
};

8
frontend/src/components/pc/public/layout/Layout.jsx
View file

@ -1,16 +1,20 @@
import { useLocation } from 'react-router-dom';
import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import Header from './Header';
import Footer from './Footer';
import '@/pc.css';
// 트랙 클릭 시 해당 방향으로 스크롤 (핸들을 빗나가게 클릭해도 동작)
OverlayScrollbars.plugin(ClickScrollPlugin);
// 페이지 오버레이 스크롤바 옵션 — 화면을 밀지 않고 뷰포트 끝에 고정
const OS_OPTIONS = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true },
};
// 일정 페이지: 세로는 내부에서 처리하므로 가로 스크롤만
const OS_OPTIONS_X = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true },
overflow: { y: 'hidden' },
};

4
frontend/src/index.css
View file

@ -8,9 +8,9 @@
--os-handle-bg: #548360;
--os-handle-bg-hover: #456e50;
--os-handle-bg-active: #456e50;
--os-size: 11px;
--os-size: 14px;
--os-handle-border-radius: 9999px;
--os-padding-perpendicular: 2px;
--os-padding-perpendicular: 3px;
--os-padding-axis: 2px;
}