congyu/Hakysidian
1
Fork 0
Code Issues Pull Requests Activity

make toc srollable if its too long

Browse Source
This commit is contained in:
丛宇
2026-03-23 13:28:51 +08:00
parent 6534dc58ab
commit f226f440a5
2 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
css/default.css
View File

@@ -615,12 +615,17 @@ hr {
div#contents-big {
position: sticky;
top: 6rem;
max-height: calc(100vh - 7rem);
max-height: calc(100dvh - 7rem);
left: 100%;
clear: both;
display: flex;
flex-direction: column;
max-width: 68%;
margin-right: 4em;
padding: 0.8rem 1.15rem 0.9rem 1.45rem;
background-color: var(--color-surface);
background-clip: padding-box;
border: 1px solid var(--color-border);
border-radius: 1.25rem;
box-shadow: var(--color-shadow-soft);
@@ -629,6 +634,36 @@ hr {
text-align: left;
}
div#contents-big .toc-scroll {
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--color-border-strong) transparent;
}
div#contents-big .toc-scroll::-webkit-scrollbar {
width: 0.7rem;
}
div#contents-big .toc-scroll::-webkit-scrollbar-track {
margin-block: 0.45rem;
background: transparent;
}
div#contents-big .toc-scroll::-webkit-scrollbar-thumb {
background-color: var(--color-border-strong);
border: 0.18rem solid transparent;
border-radius: 999px;
background-clip: content-box;
}
div#contents-big .toc-scroll::-webkit-scrollbar-thumb:hover {
background-color: var(--color-tag1);
}
div#contents-big .mini-header {
margin: 0 0 0.45rem;
color: var(--color-tag1);

2
templates/note.html
View File

@@ -12,9 +12,11 @@ $partial("templates/head.html")$
<div id="contents-big">
<p class="mini-header">Notes <a id="up-arrow" href="/">←</a></p>
<p class="mini-header">Contents <a id="up-arrow" href="#">↑</a></p>
<div class="toc-scroll">
$toc$
</div>
</div>
</div>
<div class="text-space">
<main role="main">
<h1 class="pagetitle">$title$</h1>