txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Restore sticky action bar by using overflow-x: clip instead of hidden

Browse Source 
Root cause: overflow-x: hidden on html/body elements breaks position: sticky
on descendant elements. This is a known CSS behavior.

Changes:
- _reset.css: Changed overflow-x from 'hidden' to 'clip' on html and body
  - 'clip' prevents horizontal scrolling WITHOUT breaking sticky positioning
- index.html: Restored hyperscript scroll handlers (initScrollBehavior, handleScroll)
- main.js: Disabled JavaScript scroll fallback in favor of hyperscript

Behavior:
- Desktop: Action bar hides on scroll down, reappears on scroll up
- Mobile (≤900px): Action bar stays visible at all times (CSS override)

Tested: Both desktop and mobile scroll behaviors work correctly
This commit is contained in:
juanatsap
2025-11-30 04:35:16 +00:00
parent cb5e72a5f2
commit 4a02c0a328
3 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_reset.css
+2 -2
View File
@@ -26,7 +26,7 @@ body {
background-size: 40px 40px; /* For dark theme diagonal grid */
background-attachment: fixed;
max-width: 100vw; /* Prevent horizontal overflow */
overflow-x: hidden; /* NO horizontal scroll on mobile */
overflow-x: clip; /* Clip prevents horizontal scroll WITHOUT breaking position: sticky */
}
/* Smooth scrolling */
@@ -34,7 +34,7 @@ html {
scroll-behavior: smooth;
scroll-padding-top: 70px; /* Account for fixed header */
max-width: 100vw; /* Prevent horizontal overflow */
overflow-x: hidden; /* NO horizontal scroll */
overflow-x: clip; /* Clip prevents horizontal scroll WITHOUT breaking position: sticky */
}
/* Ensure Iconify icons display properly */
static/js/main.js
+2 -1
View File
@@ -577,7 +577,8 @@
initHTMXHandlers();
handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
initZoomControlButtons();
initScrollBehaviorJS(); // JavaScript fallback for scroll behavior
// Note: Scroll behavior now handled by hyperscript in index.html body tag
// initScrollBehaviorJS() removed - hyperscript handleScroll() is preferred
});
/**
templates/index.html
+3 -1
View File
@@ -141,7 +141,9 @@
</script>
</head>
<body {{if .ThemeClean}}class="theme-clean"{{end}}
_="on keydown
_="on load call initScrollBehavior()
on scroll from window call handleScroll()
on keydown
set tagName to event.target.tagName
set isInputField to (tagName is 'INPUT' or tagName is 'TEXTAREA')
if event.key is '?' and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField