eomsangdonandClaude Opus 5
c2f681f9d3
- 세 곳(종단 그래프·유토곡선·측점 테이블)에 복사돼 있던 휠 처리를
`B05_Profile_UI_Profile_Wheel.ts` 한 벌로 통합.
- 이동은 rAF 로 목표를 쌓아 프레임마다 좁힘 — `scrollLeft` 직접 대입의 120px 점프 제거.
브라우저 `scrollTo({behavior:"smooth"})` 는 휠마다 애니메이션이 처음부터 다시 시작돼
1.6초에 17px 만 움직여 쓰지 않음(실측).
- 세로 자동 맞춤 디바운스 160 → 80ms.
- 「다시 계산 중…」 을 요약 막대에서 떼어 곡선 영역 우측 상단 오버레이로 이동 —
막대 줄바꿈으로 곡선이 밀리던 창밀림 제거.
자체검증(공용 브라우저 5173, 임시 탭): 휠 10칸 1,200px 중 1,199px 이동·궤적 연속,
마지막 휠 500ms → 재구성 813ms. 칩 표시/숨김에서 요약 막대 높이 53px·곡선 자리
(top 1078·height 226) 동일 — 창밀림 0. 칩은 곡선 영역 안 우측(범례 아래 4px).
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
74 lines
3.2 KiB
TypeScript
74 lines
3.2 KiB
TypeScript
/* =============================================================================
|
|
* B05_Profile_UI_Profile_Wheel.ts
|
|
* 세로 휠 → 가로 이동. 종단 그래프·유토곡선·측점 테이블 세 스크롤러가 같은 문법을 쓴다
|
|
* (2026-08-04 사용자 지시). 셋에 똑같이 복사돼 있던 것을 한 벌로 모았다(2026-09-04).
|
|
*
|
|
* **부드럽게 이동**(2026-09-04 사용자 지시) — 예전처럼 `scrollLeft`에 곧바로 더하면 휠
|
|
* 한 칸(120px)이 통째로 점프해 툭툭 끊긴다.
|
|
*
|
|
* 브라우저 기본 `scrollTo({ behavior: "smooth" })`는 쓰지 않는다. 휠을 굴리는 동안 매번
|
|
* 애니메이션이 **처음부터 다시 시작**돼 느린 구간만 반복하기 때문이다 — 실측으로 1.6초
|
|
* 동안 1,200px 중 17px 만 움직였다(2026-09-04). 대신 목표만 쌓아 두고 프레임마다 남은
|
|
* 거리의 일정 비율씩 좁힌다. 목표가 늘어나도 속도가 이어지므로 굴릴수록 뒤처지지 않는다.
|
|
*
|
|
* Shift+휠은 브라우저 기본 가로 스크롤이라 건드리지 않는다.
|
|
* ========================================================================== */
|
|
|
|
/** 프레임마다 남은 거리에서 좁히는 비율. 0.35면 60fps에서 약 0.13초에 도착한다 —
|
|
* 눈으로는 이어져 보이면서, 멈춘 뒤 세로 눈금이 따라오는 시간도 예전만큼 짧다. */
|
|
const EASE = 0.35;
|
|
/** 이보다 가까우면 도착으로 보고 딱 맞춘다(px). */
|
|
const SNAP_PX = 0.5;
|
|
|
|
export function attachWheelHorizontalScroll(scroller: HTMLElement): void {
|
|
let target = -1;
|
|
/** 우리가 마지막으로 써 넣은 값 — 남이 자리를 옮겼는지 가리는 데 쓴다. */
|
|
let applied = -1;
|
|
let frame = 0;
|
|
|
|
function stop(): void {
|
|
if (frame) cancelAnimationFrame(frame);
|
|
frame = 0;
|
|
target = -1;
|
|
applied = -1;
|
|
}
|
|
|
|
function step(): void {
|
|
frame = 0;
|
|
// 스크롤바 끌기·스크롤 동기화처럼 다른 경로가 자리를 옮겼으면 이동을 접는다.
|
|
if (applied >= 0 && Math.abs(scroller.scrollLeft - applied) > 1) return stop();
|
|
const limit = scroller.scrollWidth - scroller.clientWidth;
|
|
const goal = Math.min(limit, Math.max(0, target));
|
|
const rest = goal - scroller.scrollLeft;
|
|
if (Math.abs(rest) <= SNAP_PX) {
|
|
scroller.scrollLeft = goal;
|
|
return stop();
|
|
}
|
|
const next = scroller.scrollLeft + rest * EASE;
|
|
scroller.scrollLeft = next;
|
|
applied = scroller.scrollLeft;
|
|
frame = requestAnimationFrame(step);
|
|
}
|
|
|
|
scroller.addEventListener(
|
|
"wheel",
|
|
(event) => {
|
|
if (event.shiftKey || event.deltaY === 0) return;
|
|
const limit = scroller.scrollWidth - scroller.clientWidth;
|
|
if (limit <= 0) return;
|
|
// 이동 중이면 **직전 목표**에 이어 더한다 — 현재 위치에 더하면 아직 못 간 거리를
|
|
// 잃어 굴릴수록 뒤처진다.
|
|
const from = frame ? target : scroller.scrollLeft;
|
|
const next = Math.min(limit, Math.max(0, from + event.deltaY));
|
|
if (next === from && (next <= 0 || next >= limit)) return;
|
|
target = next;
|
|
if (!frame) {
|
|
applied = scroller.scrollLeft;
|
|
frame = requestAnimationFrame(step);
|
|
}
|
|
event.preventDefault();
|
|
},
|
|
{ passive: false },
|
|
);
|
|
}
|