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

fix(pc): 스크롤바 clickScroll을 'instant'로 — 커서 클릭점 어긋남에 둔감하게

Browse source 
사용자 환경에서 커서가 가리키는 지점과 실제 클릭 좌표가 수 px 어긋나
(maplestory에서도 동일 확인), 세로 8px 핸들을 조준해도 클릭이 핸들 밖
트랙에 떨어져 드래그가 간헐적으로 안 잡히던 문제. 'instant' 모드는
스크롤바 띠(14px) 어디를 눌러도 핸들이 그 위치로 즉시 점프하고 그대로
드래그가 이어져 정밀 조준이 불필요. ClickScrollPlugin은 불필요해져 제거.
헤드리스로 트랙 press→점프→연속 드래그 검증 완료.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-06-10 19:43:46 +09:00
parent 3fef42aa6c
commit 734fc59bb2
2 changed files with 4 additions and 12 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,19 +4,15 @@
* 헤더 고정 + 본문 스크롤 구조
*/
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, clickScroll: true },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' },
};
const OS_OPTIONS_X = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' },
overflow: { y: 'hidden' },
};

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

@ -1,20 +1,16 @@
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, clickScroll: true },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' },
};
// 일정 페이지: 세로는 내부에서 처리하므로 가로 스크롤만
const OS_OPTIONS_X = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true },
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' },
overflow: { y: 'hidden' },
};