Determine best option to disable background (body) scroll when offcanvas nav is active

[joeparsons]

Problem/Motivation

Follow-up to #887 / #889 to come up with a more complete fix for background/body scrolling still happening when off-canvas nav is activated on various mobile devices.

Describe the bug

On mobile devices (especially iOS?) the background/body of the page is still scrollable when the off canvas navbar is activated, even after the fixes applied for #887.

Proposed resolution

We discussed several potential options for addressing this issue in our 2023-08-25 Friday meeting including:

• pointer-events
• touch-action
• inert
• height: 100% or height: 100vh being applied to body

Expected behavior

The body/background should not be scrollable (or interact-able) when the off-canvas navbar is activated.

[trackleft]

Let's test the impact of this on core web vitals. I wonder if this is a real concern.

I do know that the mobile nav renders on initial page load and then moves off screen, which is probably a bigger problem.

If that were not the case, then I would say that we could set the height dynamically.

Alternatively, wait for the bootstrap 5 modal version of off-canvas nav

[Krystation]

Hey, just scrolling through trying to find a thing to work on. Is this task still relevant or if just going with bootstraps .offcanvas lass?

[joeparsons]

Hey, just scrolling through trying to find a thing to work on. Is this task still relevant or if just going with bootstraps .offcanvas lass?

Hi @Krystation, I think this is still worth addressing in Arizona Bootstrap 2.0.x, if possible. Thanks!