From 2acdec323fe37c4d3675ada7d14832fe9d90954b Mon Sep 17 00:00:00 2001
From: Stephen Tse <Stephen-X@users.noreply.github.com>
Date: Sat, 26 Apr 2025 18:13:56 +0000
Subject: [PATCH] fix(explorer): Prevent html from being scrollable when mobile explorer is open (#1895)
---
quartz/components/styles/explorer.scss | 20 +++-----------------
quartz/components/scripts/explorer.inline.ts | 22 +++++++++++++++++++++-
2 files changed, 24 insertions(+), 18 deletions(-)
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index b431c53..9c83411 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -23,11 +23,18 @@
function toggleExplorer(this: HTMLElement) {
const nearestExplorer = this.closest(".explorer") as HTMLElement
if (!nearestExplorer) return
- nearestExplorer.classList.toggle("collapsed")
+ const explorerCollapsed = nearestExplorer.classList.toggle("collapsed")
nearestExplorer.setAttribute(
"aria-expanded",
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) {
@@ -270,12 +277,25 @@
if (mobileExplorer.checkVisibility()) {
explorer.classList.add("collapsed")
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")
}
})
+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.
+ const explorer = document.querySelector(".explorer")
+ if (explorer && !explorer.classList.contains("collapsed")) {
+ document.documentElement.classList.add("mobile-no-scroll")
+ return
+ }
+})
+
function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
}
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 55c4372..002b086 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -263,22 +263,8 @@
}
}
-.no-scroll {
- opacity: 0;
- 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;
+.mobile-no-scroll {
+ @media all and ($mobile) {
+ overflow: hidden;
}
}
--
Gitblit v1.10.0