fix: resolve katex-display scrollbar issues (#326)

* fix: resolve katex-display scrollbar issues

* style: add katex display container styles for better responsiveness

* fix: enhance katex display handling with scrollable containers and intersection observer

---------

Co-authored-by: L4Ph <4ranci0ne@gmail.com>

src/layouts/Layout.astro

@@ -316,13 +316,49 @@ function initCustomScrollbar() {
 			}
 		});
 	});
+
 	const katexElements = document.querySelectorAll('.katex-display') as NodeListOf<HTMLElement>;
-	katexElements.forEach((ele) => {
+
-		OverlayScrollbars(ele, {
+	const katexObserverOptions = {
+		root: null,
+		rootMargin: '100px',
+		threshold: 0.1
+	};
+
+	const processKatexElement = (element: HTMLElement) => {
+		if (!element.parentNode) return;
+		if (element.hasAttribute('data-scrollbar-initialized')) return;
+		
+		const container = document.createElement('div');
+		container.className = 'katex-display-container';
+		container.setAttribute('aria-label', 'scrollable container for formulas');
+		
+		element.parentNode.insertBefore(container, element);
+		container.appendChild(element);
+		
+		OverlayScrollbars(container, {
 			scrollbars: {
-				theme: 'scrollbar-base scrollbar-auto py-1',
+				theme: 'scrollbar-base scrollbar-auto',
+				autoHide: 'leave',
+				autoHideDelay: 500,
+				autoHideSuspend: false
 			}
 		});
+		
+		element.setAttribute('data-scrollbar-initialized', 'true');
+	};
+
+	const katexObserver = new IntersectionObserver((entries, observer) => {
+		entries.forEach(entry => {
+			if (entry.isIntersecting) {
+			processKatexElement(entry.target as HTMLElement);
+			observer.unobserve(entry.target);
+			}
+		});
+	}, katexObserverOptions);
+
+	katexElements.forEach(element => {
+		katexObserver.observe(element);
 	});
 }
 

src/styles/markdown.css

@@ -91,4 +91,11 @@
         }
 
     }
+
+    .katex-display-container {
+        max-width: 100%;
+        overflow-x: auto;
+        margin: 1em 0;
+    }
+    
 }