Disables TOC and scrollspy on mobile viewports

Prevents mobile scroll “fighting” by limiting scrollspy and the page TOC to desktop-sized viewports.

Removes any existing TOC markup and related layout class when below the desktop breakpoint to avoid interfering with touch scrolling.
This commit is contained in:
rbalsleyMSFT
2026-02-03 23:23:12 -08:00
parent 3a4146e0c3
commit 133e70ea89
+28
View File
@@ -10,6 +10,14 @@
return true; return true;
} }
function IsDesktopViewport() {
try {
return window.matchMedia && window.matchMedia('(min-width: 66.5rem)').matches;
} catch (e) {
return false;
}
}
function GetHeadings(container) { function GetHeadings(container) {
var headings = container.querySelectorAll('h2, h3'); var headings = container.querySelectorAll('h2, h3');
var results = []; var results = [];
@@ -104,6 +112,11 @@
return; return;
} }
/* Scrollspy is desktop-only; on mobile it can cause "fighting" scroll behavior */
if (!IsDesktopViewport()) {
return;
}
var headingElements = []; var headingElements = [];
for (var i = 0; i < headings.length; i++) { for (var i = 0; i < headings.length; i++) {
var el = document.getElementById(headings[i].id); var el = document.getElementById(headings[i].id);
@@ -221,6 +234,21 @@
return; return;
} }
/* Desktop-only TOC: on mobile it interferes with scrolling */
if (!IsDesktopViewport()) {
var existingWrap = document.querySelector('.main-content-wrap');
if (existingWrap) {
var existingToc = existingWrap.querySelector('.page-toc');
if (existingToc) {
existingToc.remove();
}
existingWrap.classList.remove('has-page-toc');
}
return;
}
var main = document.querySelector('.main-content main'); var main = document.querySelector('.main-content main');
if (!main) { if (!main) {
return; return;