Sidebar container: fix scrolling glitch when main is shorter than the…

… adjacent sidebar

When the sidebar becomes fixed, the height of the main element collapses causing the sidebar to become unfixed again.
To avoid this we add an observer to set a min height on the main element, matching the unfixed sidebar height.

Fixes #611

mu-plugins/blocks/sidebar-container/src/view.js

@@ -1,3 +1,5 @@
+/* global ResizeObserver */
+
 let containers;
 let main;
 let footer;
@@ -100,6 +102,28 @@ function init() {
 			const scrollHandler = createScrollHandler( container );
 			scrollHandlers.push( scrollHandler );
 			window.addEventListener( 'scroll', scrollHandler );
+
+			// When the sidebar container adjacent to the main element (usually the chapter list)
+			// is taller than the main element, a glitch occurs when scrolling past the point where
+			// the sidebar becomes fixed, because the main element height depends on the sidebar container
+			// height. To avoid this, we observe the height of this container when it is not fixed, and
+			// set the min-height of the main element to match the container height.
+			const isSibling = container.previousElementSibling === main || container.nextElementSibling === main;
+			if ( 'ResizeObserver' in window && isSibling ) {
+				const resizeObserver = new ResizeObserver( ( entries ) => {
+					for ( const entry of entries ) {
+						if ( ! container.classList.contains( 'is-fixed-sidebar' ) ) {
+							const containerHeight = entry.contentRect.height;
+
+							if ( containerHeight ) {
+								main.style.setProperty( 'min-height', `${ containerHeight }px` );
+							}
+						}
+					}
+				} );
+
+				resizeObserver.observe( container );
+			}
 		} );
 	}