GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 21:34:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed html page being scrollable when mobile explorer is open

Browse Source
This commit is contained in:
Stephen Tse 2025-03-31 23:31:46 -07:00
parent f334e78ed6
commit 092307d841
2 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
quartz/components/scripts/explorer.inline.ts
View File

@ -23,11 +23,18 @@ let currentExplorerState: Array<FolderState>
function toggleExplorer(this: HTMLElement) { function toggleExplorer(this: HTMLElement) {
const nearestExplorer = this.closest(".explorer") as HTMLElement const nearestExplorer = this.closest(".explorer") as HTMLElement
if (!nearestExplorer) return if (!nearestExplorer) return
nearestExplorer.classList.toggle("collapsed") var explorerCollapsed = nearestExplorer.classList.toggle("collapsed")
nearestExplorer.setAttribute( nearestExplorer.setAttribute(
"aria-expanded", "aria-expanded",
nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true", nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
) )
if (!explorerCollapsed) {
// Stop <html> from being scrollable when mobile explorer is open
document.documentElement.classList.add("mobile-no-scroll")
} else {
document.documentElement.classList.remove("mobile-no-scroll")
}
} }
function toggleFolder(evt: MouseEvent) { function toggleFolder(evt: MouseEvent) {
@ -270,12 +277,25 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
if (mobileExplorer.checkVisibility()) { if (mobileExplorer.checkVisibility()) {
explorer.classList.add("collapsed") explorer.classList.add("collapsed")
explorer.setAttribute("aria-expanded", "false") explorer.setAttribute("aria-expanded", "false")
// Allow <html> to be scrollable when mobile explorer is collapsed
document.documentElement.classList.remove("mobile-no-scroll")
} }
mobileExplorer.classList.remove("hide-until-loaded") mobileExplorer.classList.remove("hide-until-loaded")
} }
}) })
window.addEventListener("resize", function() {
// Desktop explorer opens by default, and it stays open when the window is resized
// to mobile screen size. Applies `no-scroll` to <html> in this edge case.
var explorer = document.querySelector(".explorer")
if (explorer && !explorer.classList.contains("collapsed")) {
document.documentElement.classList.add("mobile-no-scroll")
return
}
})
function setFolderState(folderElement: HTMLElement, collapsed: boolean) { function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open") return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
} }

18
quartz/components/styles/explorer.scss
View File

@ -262,22 +262,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
} }
} }
.no-scroll { .mobile-no-scroll {
opacity: 0; @media all and ($mobile) {
overflow: hidden; overflow: hidden;
} }
html:has(.no-scroll) {
overflow: hidden;
}
@media all and not ($mobile) {
.no-scroll {
opacity: 1 !important;
overflow: auto !important;
}
html:has(.no-scroll) {
overflow: auto !important;
}
} }