diff --git a/src/components/Post.tsx b/src/components/Post.tsx index 77092a9..2fce4f5 100644 --- a/src/components/Post.tsx +++ b/src/components/Post.tsx @@ -21,7 +21,7 @@ const Post: Component = (props) => { const { overflow, elementRef } = useDetectOverflow(); const formatDate = useFormatDate(); - const [showOverflow, setShowOverflow] = createSignal(); + const [showOverflow, setShowOverflow] = createSignal(false); const createdAt = () => formatDate(props.createdAt); const createdAtFull = () => props.createdAt.toLocaleString(); @@ -88,7 +88,7 @@ const Post: Component = (props) => {
{props.content}
diff --git a/src/hooks/useDetectOverflow.ts b/src/hooks/useDetectOverflow.ts index d758208..57a1605 100644 --- a/src/hooks/useDetectOverflow.ts +++ b/src/hooks/useDetectOverflow.ts @@ -1,8 +1,16 @@ import { createSignal, onMount, onCleanup } from 'solid-js'; +import throttle from 'lodash/throttle'; + // TODO Find a better way to solve this. Firefox on Windows can cause 2px gap. const Offset = 2; +const ThrottleWaitMs = 200; + +/** + * Detect overflow if the height of the target element content is bigger than + * actual displayed height or window height. + */ const useDetectOverflow = () => { let elementRef: HTMLElement | undefined; const [overflow, setOverflow] = createSignal(false); @@ -11,11 +19,14 @@ const useDetectOverflow = () => { elementRef = el; }; - const detectOverflow = () => { + const detectOverflow = throttle(() => { if (elementRef != null) { - setOverflow(elementRef.scrollHeight > elementRef.clientHeight + Offset); + setOverflow( + elementRef.scrollHeight > elementRef.clientHeight + Offset || + elementRef.scrollHeight > document.documentElement.clientHeight + Offset, + ); } - }; + }, ThrottleWaitMs); onMount(() => { if (elementRef != null) { @@ -30,13 +41,17 @@ const useDetectOverflow = () => { }); }, { - threshold: [0, 0.5, 1], + threshold: 0, }, ); observer.observe(elementRef); + const handleResize = () => detectOverflow(); + window.addEventListener('resize', handleResize); + onCleanup(() => { observer.disconnect(); + window.removeEventListener('resize', handleResize); }); } });