diff --git a/resources/skins.vector.es6/main.js b/resources/skins.vector.es6/main.js
index 6dfd95e1a..21d7ff45f 100644
--- a/resources/skins.vector.es6/main.js
+++ b/resources/skins.vector.es6/main.js
@@ -18,7 +18,8 @@ const
 	TOC_SCROLL_HOOK = 'table_of_contents',
 	PAGE_TITLE_SCROLL_HOOK = 'page_title',
 	TOC_QUERY_PARAM = 'tableofcontents',
-	TOC_EXPERIMENT_NAME = 'skin-vector-toc-experiment';
+	TOC_EXPERIMENT_NAME = 'skin-vector-toc-experiment',
+	SCROLL_TOC_BELOW_CLASS = 'vector-scrolled-below-table-of-contents';
 
 /**
  * @callback OnIntersection
@@ -95,30 +96,22 @@ const main = () => {
 	const tocElement = document.getElementById( TOC_ID );
 	const tocElementLegacy = document.getElementById( TOC_ID_LEGACY );
 	const bodyContent = document.getElementById( BODY_CONTENT_ID );
-	const tocLegacyPlaceholder = document.getElementsByTagName( TOC_LEGACY_PLACEHOLDER_TAG )[ 0 ];
-	const tocLegacyTargetIntersection = tocElementLegacy || tocLegacyPlaceholder;
 
-	// Set up intersection observer for sticky header and table of contents functionality
-	// and to fire scroll event hooks for event logging if AB tests are enabled for
-	// either feature.
+	// Set up intersection observer for page title, used by sticky header
 	const observer = scrollObserver.initScrollObserver(
 		() => {
 			if ( isStickyHeaderAllowed && isStickyHeaderEnabled ) {
 				stickyHeader.show( header );
+				document.body.classList.add( SCROLL_TOC_BELOW_CLASS );
 			}
 			scrollObserver.fireScrollHook( 'down', PAGE_TITLE_SCROLL_HOOK );
-			if ( tocLegacyTargetIntersection ) {
-				scrollObserver.fireScrollHook( 'down', TOC_SCROLL_HOOK );
-			}
 		},
 		() => {
 			if ( isStickyHeaderAllowed && isStickyHeaderEnabled ) {
 				stickyHeader.hide( header );
+				document.body.classList.remove( SCROLL_TOC_BELOW_CLASS );
 			}
 			scrollObserver.fireScrollHook( 'up', PAGE_TITLE_SCROLL_HOOK );
-			if ( tocLegacyTargetIntersection ) {
-				scrollObserver.fireScrollHook( 'up', TOC_SCROLL_HOOK );
-			}
 		}
 	);
 
@@ -133,9 +126,21 @@ const main = () => {
 		observer.observe( stickyIntersection );
 	}
 
+	// Setup intersection observer for TOC scroll event tracking
+	// fire hooks for event logging if AB tests are enabled
+	const tocLegacyPlaceholder = document.getElementsByTagName( TOC_LEGACY_PLACEHOLDER_TAG )[ 0 ];
+	const tocLegacyTargetIntersection = tocElementLegacy || tocLegacyPlaceholder;
 	// Initiate observer for table of contents in main content.
 	if ( tocLegacyTargetIntersection ) {
-		observer.observe( tocLegacyTargetIntersection );
+		const tocObserver = scrollObserver.initScrollObserver(
+			() => {
+				scrollObserver.fireScrollHook( 'down', TOC_SCROLL_HOOK );
+			},
+			() => {
+				scrollObserver.fireScrollHook( 'up', TOC_SCROLL_HOOK );
+			}
+		);
+		tocObserver.observe( tocLegacyTargetIntersection );
 	}
 
 	// Add event data attributes to legacy TOC
diff --git a/resources/skins.vector.es6/scrollObserver.js b/resources/skins.vector.es6/scrollObserver.js
index c3159c80a..240dcd39f 100644
--- a/resources/skins.vector.es6/scrollObserver.js
+++ b/resources/skins.vector.es6/scrollObserver.js
@@ -7,8 +7,7 @@ const
 	SCROLL_TOC_CONTEXT_ABOVE = 'scrolled-above-table-of-contents',
 	SCROLL_TOC_CONTEXT_BELOW = 'scrolled-below-table-of-contents',
 	SCROLL_TOC_ACTION = 'scroll-to-toc',
-	SCROLL_TOC_PARAMETER = 'table_of_contents',
-	SCROLL_TOC_BELOW_CLASS = 'vector-scrolled-below-table-of-contents';
+	SCROLL_TOC_PARAMETER = 'table_of_contents';
 
 /**
  * @typedef {Object} scrollVariables
@@ -55,19 +54,11 @@ function fireScrollHook( direction, hook ) {
 		mw.hook( scrollVariables.scrollHook ).fire( {
 			context: scrollVariables.scrollContextBelow
 		} );
-		// Piggy back on this function to apply needed class for shifting TOC.
-		if ( hook === SCROLL_TOC_PARAMETER ) {
-			document.body.classList.add( SCROLL_TOC_BELOW_CLASS );
-		}
 	} else {
 		mw.hook( scrollVariables.scrollHook ).fire( {
 			context: scrollVariables.scrollContextAbove,
 			action: scrollVariables.scrollAction
 		} );
-		// Piggy back on this function to apply needed class for shifting TOC.
-		if ( hook === SCROLL_TOC_PARAMETER ) {
-			document.body.classList.remove( SCROLL_TOC_BELOW_CLASS );
-		}
 	}
 }
 
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index b98217851..25ebd4e43 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -334,8 +334,20 @@ body {
 }
 
 .skin-vector-toc-experiment-control .mw-table-of-contents-container,
-.skin-vector-toc-experiment-unsampled .mw-table-of-contents-container,
+.skin-vector-toc-experiment-unsampled .mw-table-of-contents-container {
+	display: none;
+}
+
+// Cannot use display: none on legacy TOC because it needs to be accessible
+// to scrollObserver for the TOC A/B test (T303297)
+// Instead we hide the contents of the legacy TOC and reset it's styles
+// See I3f247730fa1c399e6d2e4d866677703fc24e8c58
 .skin-vector-toc-experiment-treatment #toc {
+	padding: 0;
+	border: 0;
+}
+
+.skin-vector-toc-experiment-treatment #toc > * {
 	display: none;
 }