diff --git a/src/components/MaskedScroll.tsx b/src/components/MaskedScroll.tsx index f384263e..45dba06a 100644 --- a/src/components/MaskedScroll.tsx +++ b/src/components/MaskedScroll.tsx @@ -5,6 +5,7 @@ export default function MaskedScroll({ direction, fadeSize, animationDuration, + setMaxSize, hideScrollbar, updateMaskOnEvents, scrollToEndOnMount, @@ -20,6 +21,7 @@ Omit[0], 'ref'>) { direction, fadeSize, animationDuration, + setMaxSize, hideScrollbar, updateMaskOnEvents, scrollToEndOnMount, diff --git a/src/components/useMaskedScroll.ts b/src/components/useMaskedScroll.ts index 87f02e2e..31a0d532 100644 --- a/src/components/useMaskedScroll.ts +++ b/src/components/useMaskedScroll.ts @@ -14,6 +14,7 @@ export default function useMaskedScroll({ direction = 'vertical', fadeSize = 24, animationDuration = 0.3, + setMaxSize = true, hideScrollbar = true, // Disable when calling 'updateMask' explicitly updateMaskOnEvents = true, @@ -24,6 +25,7 @@ export default function useMaskedScroll({ direction?: 'vertical' | 'horizontal' fadeSize?: number animationDuration?: number + setMaxSize?: boolean hideScrollbar?: boolean scrollToEndOnMount?: boolean }) { @@ -106,10 +108,15 @@ export default function useMaskedScroll({ transition, ...hideScrollbar && { scrollbarWidth: 'none' }, ...isVertical - ? { maxHeight: '100%', overflowY: 'scroll' } - : { maxWidth: '100%', overflowX: 'scroll' }, + ? { + ...setMaxSize && { maxHeight: '100%' }, + overflowY: 'scroll', + } : { + ...setMaxSize && { maxWidth: '100%' }, + overflowX: 'scroll', + }, }; - }, [isVertical, fadeSize, animationDuration, hideScrollbar]); + }, [isVertical, fadeSize, animationDuration, hideScrollbar, setMaxSize]); return { styleMask, updateMask }; } diff --git a/src/photo/PhotoGridPageClient.tsx b/src/photo/PhotoGridPageClient.tsx index 3bdc1bcd..4d467410 100644 --- a/src/photo/PhotoGridPageClient.tsx +++ b/src/photo/PhotoGridPageClient.tsx @@ -41,6 +41,7 @@ export default function PhotoGridPageClient({ 'max-h-screen py-4', )} fadeSize={100} + setMaxSize={false} >