탭바 스크롤 연동 개선: 실시간 위치 추적 및 스냅 동작

- 스크롤 양의 50%만큼 탭바가 실시간으로 이동
- currentTranslateY 변수로 위치 추적 (DOM 읽기 제거)
- 스크롤 중지 시 50% 기준으로 자동 스냅
- 점진적 opacity 변화 적용 (0.1~1)
- will-change와 cubic-bezier로 성능 최적화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-10-16 18:23:13 +09:00
parent f4e2fe4769
commit b48c936f12
2 changed files with 79 additions and 17 deletions

View File

@@ -296,11 +296,11 @@ footer {
align-items: center;
z-index: 1000;
border-top: 0.1px solid var(--color-E5E5E5);
transition: transform 0.3s ease-in-out;
will-change: transform;
}
.bottom-tabbar.hidden {
transform: translateY(100%);
.bottom-tabbar.snapping {
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.tab-button {
@@ -313,14 +313,9 @@ footer {
background: none;
border: none;
cursor: pointer;
transition: all 0.2s ease, opacity 0.3s ease-in-out;
transition: all 0.2s ease;
padding: 8px 4px;
box-sizing: border-box;
opacity: 1;
}
.bottom-tabbar.hidden .tab-button {
opacity: 0.1;
}
.tab-button:hover {