scroll-behavior: smooth interacts poorly with MultimediaViewer

[RogerDodger]

When the mmv lightbox closes, it scrolls back to the original place in the page, as if the lightbox were an overlay.

With html { scroll-behavior: smooth }, this scroll becomes visible and jarring.

Ideally there'd be a class to select against, e.g. html.citizen-animations-ready:not(.mw-mmv-lightbox-open) { scroll-behavior: smooth; }, but unfortunately the relevant handler in the MultimediaViewer code is:

MMVB.cleanupOverlay = function () {
	var bootstrap = this;

	$( document.body ).removeClass( 'mw-mmv-lightbox-open' );

	if ( this.$overlay ) {
		this.$overlay.remove();
	}

	if ( this.savedScrollTop !== undefined ) {
		// setTimeout because otherwise Chrome will scroll back to top after the popstate event handlers run
		setTimeout( function () {
			$( window ).scrollTop( bootstrap.savedScrollTop );
			bootstrap.savedScrollTop = undefined;
		} );
	}
};

So the selector is removed before the scroll, and it's set to body, not html.

Injecting some addClass and removeClass calls to the function in the setTimeout works, but I don't know a way to do this cleanly (i.e. without changing the MultimediaViewer code). The following somewhere seems to work, but I don't know where it'd go, and has an obviously flimsy race condition:

$(document).on('mmv-setup-overlay', function () {
	$('html').addClass('mw-mmv-lightbox-linger');
});

$(document).on('mmv-cleanup-overlay', function () {
	setTimeout(function () {
		$('html').removeClass('mw-mmv-lightbox-linger');
	}, 20)
});

[alistair3149]

I'll look into it. It is an upstream issue so modifying the source code would not solve it for everyone. Something similar like your second solution would work, except that the skin won't be able to access the function name in MMV, so probably some kind of observer to keep track of class changes and add the relevant class or styles

[RogerDodger]

The script above is just assigning listeners to named events that the MMV code triggers at appropriate times. Scope or load order shouldn't matter (as long as jQuery is loaded). I can at least say for sure it works running in Common.js.