From d166b24d59dd80e83104780f385ffbf86750ca75 Mon Sep 17 00:00:00 2001 From: Jerry Kim <42jerrykim@gmail.com> Date: Tue, 24 Dec 2024 12:52:05 +0900 Subject: [PATCH 1/2] Use ResizeObserver to detect changes in the size of .article-content This code is for handling changes in position caused by content rendered as part of post-processing, such as Mermaid diagrams --- assets/ts/scrollspy.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/assets/ts/scrollspy.ts b/assets/ts/scrollspy.ts index 8a1408530..95cee0d21 100644 --- a/assets/ts/scrollspy.ts +++ b/assets/ts/scrollspy.ts @@ -125,6 +125,15 @@ function setupScrollspy() { scrollHandler(); } + // Use ResizeObserver to detect changes in the size of .article-content + const articleContent = document.querySelector(".article-content"); + if (articleContent) { + const resizeObserver = new ResizeObserver(() => { + resizeHandler(); + }); + resizeObserver.observe(articleContent); +} + window.addEventListener("resize", debounced(resizeHandler)); } From 14ee1f20a441decefbe4445d97762e61e57ef51a Mon Sep 17 00:00:00 2001 From: Jimmy Date: Wed, 21 May 2025 13:14:02 +0200 Subject: [PATCH 2/2] Add debounced to resizeHandler --- assets/ts/scrollspy.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/assets/ts/scrollspy.ts b/assets/ts/scrollspy.ts index 95cee0d21..278124495 100644 --- a/assets/ts/scrollspy.ts +++ b/assets/ts/scrollspy.ts @@ -128,13 +128,11 @@ function setupScrollspy() { // Use ResizeObserver to detect changes in the size of .article-content const articleContent = document.querySelector(".article-content"); if (articleContent) { - const resizeObserver = new ResizeObserver(() => { - resizeHandler(); - }); + const resizeObserver = new ResizeObserver(debounced(resizeHandler)); resizeObserver.observe(articleContent); -} + } window.addEventListener("resize", debounced(resizeHandler)); } -export { setupScrollspy }; \ No newline at end of file +export { setupScrollspy };