fix(layout): balance topics and content scrolling (#33)

Author: shalshcode08

build.js

@@ -272,14 +272,16 @@ function buildBreadcrumb(pagePath) {
 function noteMain(pagePath, prefix, contentHtml) {
   return (
     `<div class="overlay" id="overlay"></div>\n` +
-    `    <div class="layout">\n` +
+    `    <div class="page-scroll" id="pageScroll">\n` +
+    `      <div class="layout">\n` +
     `      <aside class="sidebar" id="sidebar" aria-label="Topics">\n` +
     `${buildSidebar(pagePath, prefix)}\n` +
     `      </aside>\n` +
     `      <main class="content">\n` +
     `        <article class="article">${contentHtml.trim()}</article>\n` +
     `      </main>\n` +
     `${buildContents(contentHtml)}\n` +
+    `      </div>\n` +
     `    </div>`
   );
 }
@@ -302,7 +304,7 @@ function homeMain() {
     })
     .join("\n");
   return (
-    `<main class="home-main">\n` +
+    `<main class="home-main" id="pageScroll">\n` +
     `      <div class="home">\n` +
     `        <img class="home-logo" src="knowledge_base_logo.png" alt="" width="76" height="76" />\n` +
     `        <h1>knowledge base</h1>\n` +

src/shell.html

@@ -214,17 +214,18 @@
         if (sidebar) window.requestAnimationFrame(centerActiveSidebarLink);
 
         var toTop = document.getElementById("toTop");
-        if (toTop) {
+        var pageScroll = document.getElementById("pageScroll");
+        if (toTop && pageScroll) {
           var onScroll = function () {
-            var doc = document.documentElement;
-            var nearBottom = window.innerHeight + window.scrollY >= doc.scrollHeight - 160;
-            toTop.hidden = !(window.scrollY > 320 && nearBottom);
+            var nearBottom =
+              pageScroll.clientHeight + pageScroll.scrollTop >= pageScroll.scrollHeight - 160;
+            toTop.hidden = !(pageScroll.scrollTop > 320 && nearBottom);
           };
-          window.addEventListener("scroll", onScroll, { passive: true });
+          pageScroll.addEventListener("scroll", onScroll, { passive: true });
           window.addEventListener("resize", onScroll, { passive: true });
           onScroll();
           toTop.addEventListener("click", function () {
-            window.scrollTo({ top: 0, behavior: "smooth" });
+            pageScroll.scrollTo({ top: 0, behavior: "smooth" });
           });
         }
       })();

src/styles.css

@@ -18,12 +18,17 @@
   box-sizing: border-box;
 }
 html {
+  height: 100%;
   scroll-behavior: smooth;
   overscroll-behavior-y: none;
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
   margin: 0;
+  overflow: hidden;
   font-family: var(--sans);
   font-size: 17px;
   line-height: 1.6;
@@ -42,6 +47,7 @@ a {
 .site-header {
   position: sticky;
   top: 0;
+  flex: none;
   z-index: 40;
   height: var(--header-h);
   background: #fff;
@@ -158,17 +164,26 @@ a {
   height: 18px;
 }
 
+.page-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scrollbar-gutter: stable;
+}
+
 .layout {
   display: grid;
   grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
+  min-height: 100%;
   max-width: 1320px;
   margin: 0 auto;
   align-items: start;
 }
 
 .sidebar {
   position: sticky;
-  top: var(--header-h);
+  top: 0;
   height: calc(100vh - var(--header-h));
   overflow-y: auto;
   padding: 24px 14px 48px 20px;
@@ -282,7 +297,7 @@ a {
 
 .toc {
   position: sticky;
-  top: calc(var(--header-h) + 28px);
+  top: 28px;
   max-height: calc(100vh - var(--header-h) - 56px);
   overflow-y: auto;
   margin: 28px 20px 0 0;
@@ -378,12 +393,12 @@ h2 {
   margin: 48px 0 4px;
   padding-top: 20px;
   border-top: 1px solid var(--border);
-  scroll-margin-top: calc(var(--header-h) + 12px);
+  scroll-margin-top: 12px;
 }
 h3 {
   font-size: 19px;
   margin: 32px 0 4px;
-  scroll-margin-top: calc(var(--header-h) + 12px);
+  scroll-margin-top: 12px;
 }
 h4 {
   font-size: 16px;
@@ -638,9 +653,14 @@ footer.doc-footer {
 }
 
 .home-main {
-  max-width: 920px;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
   margin: 0 auto;
   padding: 56px 24px 96px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scrollbar-gutter: stable;
 }
 .home {
   max-width: 820px;
@@ -664,8 +684,8 @@ footer.doc-footer {
 }
 .topic-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  align-items: start;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
   gap: 16px;
   text-align: left;
 }
@@ -855,6 +875,9 @@ footer.doc-footer {
   .content {
     padding: 20px 16px;
   }
+  .topic-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
   .toc {
     margin: 14px 16px 2px;
   }