The Trans Directory
fix(explorer): Prevent html from being scrollable when mobile explorer is open (#1895)
* Fixed html page being scrollable when mobile explorer is open
* Prettier code
* Addressed comment
authored by
Stephen Tse
and committed by
GitHub
2acdec32
9e588577
+24
-18
+21
-1
quartz/components/scripts/explorer.inline.ts
+21
-1
quartz/components/scripts/explorer.inline.ts
···
23
23
function toggleExplorer(this: HTMLElement) {
24
24
const nearestExplorer = this.closest(".explorer") as HTMLElement
25
25
if (!nearestExplorer) return
26
-
nearestExplorer.classList.toggle("collapsed")
26
+
const explorerCollapsed = nearestExplorer.classList.toggle("collapsed")
27
27
nearestExplorer.setAttribute(
28
28
"aria-expanded",
29
29
nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
30
30
)
31
+
32
+
if (!explorerCollapsed) {
33
+
// Stop <html> from being scrollable when mobile explorer is open
34
+
document.documentElement.classList.add("mobile-no-scroll")
35
+
} else {
36
+
document.documentElement.classList.remove("mobile-no-scroll")
37
+
}
31
38
}
32
39
33
40
function toggleFolder(evt: MouseEvent) {
···
270
277
if (mobileExplorer.checkVisibility()) {
271
278
explorer.classList.add("collapsed")
272
279
explorer.setAttribute("aria-expanded", "false")
280
+
281
+
// Allow <html> to be scrollable when mobile explorer is collapsed
282
+
document.documentElement.classList.remove("mobile-no-scroll")
273
283
}
274
284
275
285
mobileExplorer.classList.remove("hide-until-loaded")
286
+
}
287
+
})
288
+
289
+
window.addEventListener("resize", function () {
290
+
// Desktop explorer opens by default, and it stays open when the window is resized
291
+
// to mobile screen size. Applies `no-scroll` to <html> in this edge case.
292
+
const explorer = document.querySelector(".explorer")
293
+
if (explorer && !explorer.classList.contains("collapsed")) {
294
+
document.documentElement.classList.add("mobile-no-scroll")
295
+
return
276
296
}
277
297
})
278
298
+3
-17
quartz/components/styles/explorer.scss
+3
-17
quartz/components/styles/explorer.scss
···
263
263
}
264
264
}
265
265
266
-
.no-scroll {
267
-
opacity: 0;
268
-
overflow: hidden;
269
-
}
270
-
271
-
html:has(.no-scroll) {
272
-
overflow: hidden;
273
-
}
274
-
275
-
@media all and not ($mobile) {
276
-
.no-scroll {
277
-
opacity: 1 !important;
278
-
overflow: auto !important;
279
-
}
280
-
281
-
html:has(.no-scroll) {
282
-
overflow: auto !important;
266
+
.mobile-no-scroll {
267
+
@media all and ($mobile) {
268
+
overflow: hidden;
283
269
}
284
270
}