mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 22:02:16 +00:00
feat(mobile): add scroll-touch momentum utility for horizontal strips
Add a `.scroll-touch` utility that restores iOS WebKit momentum scrolling (`-webkit-overflow-scrolling: touch`) and contains the overscroll chain so a flick at the end of a horizontal row does not rubber-band the whole page. Apply it to the insights tab strip and the cycle tab list — the two in-app horizontal scrollers that lost inertial flick under the default `overflow-x-auto`.
This commit is contained in:
1 parent
876e94b5c4
commit
d2be72d57a
3 files changed
+17
-2
No files matched your search
@@ -448,6 +448,21 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* `.scroll-touch` — momentum scrolling for horizontal scrollers on iOS
|
||||
* WebKit. `-webkit-overflow-scrolling: touch` restores the inertial
|
||||
* flick the default `overflow-x-auto` row loses on touch; `overscroll-
|
||||
* behavior: contain` keeps a flick that reaches the end of the row from
|
||||
* chaining into the document scroll (the "rubber-band drags the whole
|
||||
* page" paper-cut). Applied to the in-app horizontal pill / tab strips
|
||||
* (insights tab strip, cycle tab list) so the gesture matches the
|
||||
* native feel the bottom-sheet scrollers already get for free.
|
||||
*/
|
||||
.scroll-touch {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
/* ── Insight card animations ─────────────────────── */
|
||||
@keyframes insight-fade-in {
|
||||
from {
|
||||
|
||||
Reference in new issue
Block a user