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:
@@ -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);
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user