Add scrollbar to table of contents if overflowed

This commit is contained in:
Helen Chong 2024-04-18 12:12:22 +08:00
parent 32069b9a6a
commit f1450c8a9b
1 changed files with 10 additions and 22 deletions

View File

@ -1,13 +1,20 @@
<aside class="left-sidebar">
<details class="toc__wrapper sidebar--sticky">
<summary class="toc__heading">
Table of Contents
On This Page
</summary>
{{ content | toc | safe }}
</details>
</aside>
<style>
.toc__wrapper {
max-height: 89vh;
overflow: auto;
background-color: var(--clr-content-bg);
padding: 1rem 1.3rem;
}
.toc__heading {
font-size: 1.3rem;
font-weight: 700;
@ -16,14 +23,14 @@
}
.toc ol,
.toc ol ol {
.toc ol ol {
display: grid;
gap: 0.3em;
}
.toc ol {
border-top: 0.1em solid var(--clr-title-border);
padding-left: 1.5em;
padding-left: 1.7em;
padding-top: 1em;
}
@ -44,22 +51,3 @@
font-size: 1rem;
}
</style>
<script defer>
// Close article ToC accordion for small screen sizes
const tocWrapper = docucument.querySelector('.toc__wrapper');
if (window.innerWidth < 480) {
tocWrapper.removeAttribute("open");
} else {
tocWrapper.setAttribute("open", true);
}
// Remove the stickiness of the sidebar ToC if it is larger than screen height
function preventSidebarOverflow() {
if (document.documentElement.clientHeight < tocWrapper.offsetHeight + 50) {
tocWrapper.style.marginTop = "0";
tocWrapper.style.position = "static";
}
}
preventSidebarOverflow();
</script>