Disable scrolling and interation with main page when ToC is open on mobile

[david-christiansen]

It would be great if opening the ToC menu on narrow screens would cause the rest of the page to get grayed out and disabled, to prevent accidental scrolling or clicks.

@jakobvase, what's the canonical way to do this?

[david-christiansen]

Also, clicking outside of the ToC should close it, rather than just the X doing that.

[jakobvase]

Here we're going to need javascript.

Add a <div class="toc-backdrop" onclick="document.getElementById('toggle-toc-click')?.click()"></div> as the first child of div.with-toc, just before the nav#toc. On desktop, add display: none to .toc-backdrop. On mobile, when the toc is visible, add position: fixed; inset: 0; background-color: #aaa8; z-index: 1; to it. That covers the graying out and the closing, and no links are active.

For preventing scrolling, the best way is to add overflow: hidden to html when the toc is open. Only on mobile.

The last thing we should do is add the attribute inert="" to main (prevents things like 'find in page' for the inert content, tab doesn't move focus there). But that's more tricky so I wouldn't do it in this case. The simplest way is probably a something like a 200ms javascript loop that checks if the conditions are there (mobile, toc open) and adds it if they are and removes it otherwise. That way we won't have to deal with listening to window resize events and add it to all the places that need it and someone forgets later and the page breaks. But as I said I don't think it's worth it in this case.

[jakobvase]

Conditional attributes is one of the reasons people use react for web programming. But it comes with a ot of strings attached and definitely doesn't fit your use case.

[david-christiansen]

This is a huge help - thanks! Would have taken me hours to figure this part out.

One minor issue: on my desktop browser, the overflow:hidden on html makes the scroll bar disappear, which causes a minor text reflow. Do you know a workaround for this?

Edit: screenshots (look at the words on the ends of the lines in the intro paragraph - they differ)

[david-christiansen]

(this is when I drag the window to be super narrow, which I think most desktop users won't do, but it might in principle happen...)

[david-christiansen]

As far as the inert property goes, what about MediaQueryList's change event? That seems to promise to be a simple way to "follow what the CSS does".

[david-christiansen]

I went ahead and merged the work so far, but it would be nice to fix the reflow issue, so this can stay open.

[david-christiansen]

Thanks again @jakobvase, by the way!