Optimize scroll performance

- Cache isMobile check in edge swipe detection to avoid layout thrashing
- Remove scroll-behavior: smooth from tab slider
- Remove -webkit-overflow-scrolling: touch

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-23 02:12:43 +01:00
parent 02c14e3fbd
commit 1bb03f4569
2 changed files with 12 additions and 9 deletions

View File

@@ -121,23 +121,27 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
startX: 0, startX: 0,
startY: 0, startY: 0,
isEdgeSwipe: false, isEdgeSwipe: false,
isMobile: false,
}); });
useEffect(() => { useEffect(() => {
const isMobile = () => window.innerWidth <= 768; // Check mobile once on mount and on resize
const updateMobile = () => {
swipeRef.current.isMobile = window.innerWidth <= 768;
};
updateMobile();
window.addEventListener('resize', updateMobile, { passive: true });
const handleTouchStart = (e: TouchEvent) => { const handleTouchStart = (e: TouchEvent) => {
if (!isMobile()) return; if (!swipeRef.current.isMobile) return;
const touch = e.touches[0]; const touch = e.touches[0];
if (!touch) return; if (!touch) return;
// Check if touch started near left edge // Check if touch started near left edge
if (touch.clientX <= EDGE_SWIPE_THRESHOLD) { if (touch.clientX <= EDGE_SWIPE_THRESHOLD) {
swipeRef.current = { swipeRef.current.startX = touch.clientX;
startX: touch.clientX, swipeRef.current.startY = touch.clientY;
startY: touch.clientY, swipeRef.current.isEdgeSwipe = true;
isEdgeSwipe: true,
};
} else { } else {
swipeRef.current.isEdgeSwipe = false; swipeRef.current.isEdgeSwipe = false;
} }
@@ -167,6 +171,7 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
document.addEventListener('touchend', handleTouchEnd, { passive: true }); document.addEventListener('touchend', handleTouchEnd, { passive: true });
return () => { return () => {
window.removeEventListener('resize', updateMobile);
document.removeEventListener('touchstart', handleTouchStart); document.removeEventListener('touchstart', handleTouchStart);
document.removeEventListener('touchmove', handleTouchMove); document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd); document.removeEventListener('touchend', handleTouchEnd);

View File

@@ -96,10 +96,8 @@ label,
max-width: 100%; max-width: 100%;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
scroll-behavior: smooth;
} }
.page-tabs-slider::-webkit-scrollbar, .page-tabs-slider::-webkit-scrollbar,