Hide visible scrollbar on mobile for a clean, app-like feel
On phones (max-width 767px) the gray scrollbar track is now hidden across the app (html/body) — swipe-to-scroll still works, only the bar is gone. Desktop keeps its custom 8px scrollbar unchanged. Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
parent
135fbaab40
commit
5a0e6d21a0
1 changed files with 15 additions and 0 deletions
|
|
@ -269,6 +269,21 @@
|
|||
background: hsl(var(--muted-foreground) / 0.5);
|
||||
}
|
||||
|
||||
/* On touch/phone screens, hide the visible scrollbar entirely for a clean,
|
||||
app-like feel. Swipe-to-scroll still works — only the bar is hidden. */
|
||||
@media (max-width: 767px) {
|
||||
html,
|
||||
body {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/old Edge */
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none; /* Chrome/Safari/WebKit */
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue