let's try this bitch
This commit is contained in:
parent
d08c3cc0a1
commit
f31b7d282d
1 changed files with 36 additions and 15 deletions
|
|
@ -34,24 +34,45 @@
|
|||
</style>
|
||||
<script>
|
||||
|
||||
// Only run on mobile
|
||||
if (window.matchMedia("(max-width: 768px)").matches) {
|
||||
let scrollTimeout;
|
||||
const html = document.documentElement;
|
||||
// Wait for the page to fully load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Check if mobile AND touch device (dual verification)
|
||||
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
||||
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
// Add color mode
|
||||
html.classList.add('color-mode');
|
||||
if (isMobile && isTouch) {
|
||||
const html = document.documentElement;
|
||||
let scrollTimeout;
|
||||
let lastScrollTime = 0;
|
||||
|
||||
// Reset timeout on scroll
|
||||
clearTimeout(scrollTimeout);
|
||||
// Handle both touch AND scroll for compatibility
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
window.addEventListener('touchmove', handleScroll, { passive: true });
|
||||
|
||||
// Revert to grayscale after 1 second of no scrolling
|
||||
scrollTimeout = setTimeout(() => {
|
||||
html.classList.remove('color-mode');
|
||||
}, 1000);
|
||||
}, { passive: true }); // Optimized for performance
|
||||
}
|
||||
function handleScroll() {
|
||||
const now = Date.now();
|
||||
|
||||
// Throttle events to improve performance
|
||||
if (now - lastScrollTime < 50) return; // 50ms throttle
|
||||
lastScrollTime = now;
|
||||
|
||||
html.classList.add('color-mode');
|
||||
clearTimeout(scrollTimeout);
|
||||
|
||||
// Longer delay for touch momentum (2 seconds)
|
||||
scrollTimeout = setTimeout(() => {
|
||||
html.classList.remove('color-mode');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Reset on touch end (for immediate feedback)
|
||||
window.addEventListener('touchend', () => {
|
||||
scrollTimeout = setTimeout(() => {
|
||||
html.classList.remove('color-mode');
|
||||
}, 500); // Shorter delay after touch ends
|
||||
}, { passive: true });
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
{{ partial "body/now.html" . }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue