mirror of
https://github.com/rbalsleyMSFT/FFU.git
synced 2026-06-14 02:09:35 -06:00
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:
@@ -10,6 +10,14 @@
|
||||
return true;
|
||||
}
|
||||
|
||||
function IsDesktopViewport() {
|
||||
try {
|
||||
return window.matchMedia && window.matchMedia('(min-width: 66.5rem)').matches;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function GetHeadings(container) {
|
||||
var headings = container.querySelectorAll('h2, h3');
|
||||
var results = [];
|
||||
@@ -104,6 +112,11 @@
|
||||
return;
|
||||
}
|
||||
|
||||
/* Scrollspy is desktop-only; on mobile it can cause "fighting" scroll behavior */
|
||||
if (!IsDesktopViewport()) {
|
||||
return;
|
||||
}
|
||||
|
||||
var headingElements = [];
|
||||
for (var i = 0; i < headings.length; i++) {
|
||||
var el = document.getElementById(headings[i].id);
|
||||
@@ -221,6 +234,21 @@
|
||||
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');
|
||||
if (!main) {
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user