From b64b4c1b9f41b626550acb34a1c90061d2736251 Mon Sep 17 00:00:00 2001
From: Roan Kattouw <roan.kattouw@gmail.com>
Date: Thu, 20 Jun 2019 14:20:33 -0700
Subject: [PATCH] Don't scroll vertically when scrolling active tab into view

Do the scrolling math manually, and only do horizontal scrolling on the
tab container. Don't do vertical scrolling, and don't scroll the
viewport.

Bug: T226112
Bug: T223142
Change-Id: Ie67e15bd51252906897a213505ae82cf29ba5cf2
---
 resources/skins.minerva.scripts/init.js | 39 +++++++++++++++++--------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/resources/skins.minerva.scripts/init.js b/resources/skins.minerva.scripts/init.js
index 6aadad3..3e2a8fc 100644
--- a/resources/skins.minerva.scripts/init.js
+++ b/resources/skins.minerva.scripts/init.js
@@ -299,20 +299,35 @@
 	 * @return {void}
 	 */
 	function initTabsScrollPosition() {
-		var selectedTabSelector = '.minerva__tab.selected',
-			$selectedTab;
-		if ( window.pageYOffset ) {
-			// The user has already scrolled down the page.
-			// Calling scrollIntoView() below would force the page to
-			// scroll back all the way up. That is undesirable.
+		var $tabContainer, tabPosition, containerPosition, left, right,
+			// eslint-disable-next-line no-jquery/no-global-selector
+			$selectedTab = $( '.minerva__tab.selected' );
+		if ( $selectedTab.length !== 1 ) {
 			return;
 		}
-		$selectedTab = $( selectedTabSelector );
-		if ( $selectedTab.length === 1 ) {
-			$selectedTab[ 0 ].scrollIntoView( {
-				block: 'end', // does nothing since we're already at the top of the page
-				inline: 'center' // center horizontally
-			} );
+
+		$tabContainer = $selectedTab.closest( '.minerva__tab-container' );
+		tabPosition = $selectedTab.position();
+		containerPosition = $tabContainer.position();
+		// Position of the left edge of $selectedTab relative to the left edge of $tabContainer
+		left = tabPosition.left - containerPosition.left;
+		// Position of the right edge of $selectedTab relative to the left edge of $tabContainer
+		right = left + $selectedTab.outerWidth();
+
+		// If $selectedTab is (partly) scrolled out of view, scroll it into view
+		// This only considers and manipulates the horizontal scroll position within $tabContainer,
+		// not the vertical scroll position of the viewport
+		if ( left < 0 ) {
+			// Left edge of $selectedTab is to the left of the left edge of $tabContainer
+			// Scroll $tabContainer to the left, by subtracting the difference from its scrollLeft
+			// (we're subtracting here by adding a negative number)
+			$tabContainer.scrollLeft( $tabContainer.scrollLeft() + left );
+		} else if ( right > $tabContainer.innerWidth() ) {
+			// Right edge of $selectedTab is to the right of the right edge of $tabContainer
+			// Scroll $tabContainer to the right, by adding the difference to its scrollLeft
+			$tabContainer.scrollLeft(
+				$tabContainer.scrollLeft() + right - $tabContainer.innerWidth()
+			);
 		}
 	}