diff --git a/src/sentry/static/sentry/app/components/events/interfaces/spans/header.tsx b/src/sentry/static/sentry/app/components/events/interfaces/spans/header.tsx
index 37fc7a4c1d604d..319e7635bd995c 100644
--- a/src/sentry/static/sentry/app/components/events/interfaces/spans/header.tsx
+++ b/src/sentry/static/sentry/app/components/events/interfaces/spans/header.tsx
@@ -2,9 +2,13 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 import space from 'app/styles/space';
+import {SentryTransactionEvent} from 'app/types';
 
 import * as CursorGuideHandler from './cursorGuideHandler';
+import * as DividerHandlerManager from './dividerHandlerManager';
 import {DragManagerChildrenProps} from './dragManager';
+import MeasurementsPanel from './measurementsPanel';
+import * as ScrollbarManager from './scrollbarManager';
 import {zIndex} from './styles';
 import {
   ParsedTraceType,
@@ -24,17 +28,21 @@ import {
   toPercent,
 } from './utils';
 
-export const MINIMAP_CONTAINER_HEIGHT = 106;
 export const MINIMAP_SPAN_BAR_HEIGHT = 4;
 const MINIMAP_HEIGHT = 120;
 export const NUM_OF_SPANS_FIT_IN_MINI_MAP = MINIMAP_HEIGHT / MINIMAP_SPAN_BAR_HEIGHT;
 const TIME_AXIS_HEIGHT = 20;
 const VIEW_HANDLE_HEIGHT = 18;
+const SECONDARY_HEADER_HEIGHT = 20;
+export const MINIMAP_CONTAINER_HEIGHT =
+  MINIMAP_HEIGHT + TIME_AXIS_HEIGHT + SECONDARY_HEADER_HEIGHT + 1;
 
 type PropType = {
   minimapInteractiveRef: React.RefObject<HTMLDivElement>;
+  virtualScrollBarContainerRef: React.RefObject<HTMLDivElement>;
   dragProps: DragManagerChildrenProps;
   trace: ParsedTraceType;
+  event: SentryTransactionEvent;
 };
 
 class TraceViewHeader extends React.Component<PropType> {
@@ -266,6 +274,65 @@ class TraceViewHeader extends React.Component<PropType> {
     );
   }
 
+  generateBounds() {
+    const {dragProps, trace} = this.props;
+
+    return boundsGenerator({
+      traceStartTimestamp: trace.traceStartTimestamp,
+      traceEndTimestamp: trace.traceEndTimestamp,
+      viewStart: dragProps.viewWindowStart,
+      viewEnd: dragProps.viewWindowEnd,
+    });
+  }
+
+  renderSecondaryHeader() {
+    const {event} = this.props;
+
+    const hasMeasurements = Object.keys(event.measurements ?? {}).length > 0;
+
+    return (
+      <DividerHandlerManager.Consumer>
+        {dividerHandlerChildrenProps => {
+          const {dividerPosition} = dividerHandlerChildrenProps;
+
+          return (
+            <SecondaryHeader>
+              <ScrollBarContainer
+                ref={this.props.virtualScrollBarContainerRef}
+                style={{
+                  // the width of this component is shrunk to compensate for half of the width of the divider line
+                  width: `calc(${toPercent(dividerPosition)} - 0.5px)`,
+                }}
+              >
+                <ScrollbarManager.Consumer>
+                  {({virtualScrollbarRef, onDragStart}) => {
+                    return (
+                      <VirtualScrollBar
+                        data-type="virtual-scrollbar"
+                        ref={virtualScrollbarRef}
+                        onMouseDown={onDragStart}
+                      >
+                        <VirtualScrollBarGrip />
+                      </VirtualScrollBar>
+                    );
+                  }}
+                </ScrollbarManager.Consumer>
+              </ScrollBarContainer>
+              <DividerSpacer />
+              {hasMeasurements ? (
+                <MeasurementsPanel
+                  event={event}
+                  generateBounds={this.generateBounds()}
+                  dividerPosition={dividerPosition}
+                />
+              ) : null}
+            </SecondaryHeader>
+          );
+        }}
+      </DividerHandlerManager.Consumer>
+    );
+  }
+
   render() {
     return (
       <HeaderContainer>
@@ -322,6 +389,7 @@ class TraceViewHeader extends React.Component<PropType> {
             </div>
           )}
         </CursorGuideHandler.Consumer>
+        {this.renderSecondaryHeader()}
       </HeaderContainer>
     );
   }
@@ -484,7 +552,7 @@ const TimeAxis = styled('div')`
   width: 100%;
   position: absolute;
   left: 0;
-  bottom: 0;
+  top: ${MINIMAP_HEIGHT}px;
   border-top: 1px solid ${p => p.theme.border};
   height: ${TIME_AXIS_HEIGHT}px;
   background-color: ${p => p.theme.background};
@@ -580,7 +648,7 @@ const HeaderContainer = styled('div')`
   z-index: ${zIndex.minimapContainer};
   background-color: ${p => p.theme.background};
   border-bottom: 1px solid ${p => p.theme.border};
-  height: ${MINIMAP_HEIGHT + TIME_AXIS_HEIGHT + 1}px;
+  height: ${MINIMAP_CONTAINER_HEIGHT}px;
 `;
 
 const MinimapBackground = styled('div')`
@@ -683,4 +751,52 @@ const WindowSelection = styled('div')`
   background-color: rgba(69, 38, 80, 0.1);
 `;
 
+const SecondaryHeader = styled('div')`
+  position: absolute;
+  top: ${MINIMAP_HEIGHT + TIME_AXIS_HEIGHT}px;
+  left: 0;
+  height: ${TIME_AXIS_HEIGHT}px;
+  width: 100%;
+  background-color: ${p => p.theme.backgroundSecondary};
+  display: flex;
+  border-top: 1px solid ${p => p.theme.border};
+`;
+
+const DividerSpacer = styled('div')`
+  width: 1px;
+  background-color: ${p => p.theme.gray200};
+`;
+
+const ScrollBarContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: ${SECONDARY_HEADER_HEIGHT}px;
+  left: 0;
+  bottom: 0;
+  & > div[data-type='virtual-scrollbar'].dragging > div {
+    background-color: ${p => p.theme.gray500};
+    cursor: grabbing;
+  }
+`;
+
+const VirtualScrollBar = styled('div')`
+  height: 8px;
+  width: 0;
+  padding-left: 4px;
+  padding-right: 4px;
+  position: relative;
+  top: 0;
+  left: 0;
+  cursor: grab;
+`;
+
+const VirtualScrollBarGrip = styled('div')`
+  height: 8px;
+  width: 100%;
+  border-radius: 20px;
+  transition: background-color 150ms ease;
+  background-color: rgba(48, 40, 57, 0.5);
+`;
+
 export default TraceViewHeader;
diff --git a/src/sentry/static/sentry/app/components/events/interfaces/spans/measurementsManager.tsx b/src/sentry/static/sentry/app/components/events/interfaces/spans/measurementsManager.tsx
deleted file mode 100644
index 91414c6f289329..00000000000000
--- a/src/sentry/static/sentry/app/components/events/interfaces/spans/measurementsManager.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-
-export type MeasurementsManagerChildrenProps = {
-  hoveringMeasurement: (measurementName: string) => void;
-  notHovering: () => void;
-  currentHoveredMeasurement: string | undefined;
-};
-
-const MeasurementsManagerContext = React.createContext<MeasurementsManagerChildrenProps>({
-  hoveringMeasurement: () => {},
-  notHovering: () => {},
-  currentHoveredMeasurement: undefined,
-});
-
-type Props = {
-  children: React.ReactNode;
-};
-
-type State = {
-  currentHoveredMeasurement: string | undefined;
-};
-
-export class Provider extends React.Component<Props, State> {
-  state: State = {
-    currentHoveredMeasurement: undefined,
-  };
-
-  hoveringMeasurement = (measurementName: string) => {
-    this.setState({
-      currentHoveredMeasurement: measurementName,
-    });
-  };
-
-  notHovering = () => {
-    this.setState({
-      currentHoveredMeasurement: undefined,
-    });
-  };
-
-  render() {
-    const childrenProps = {
-      hoveringMeasurement: this.hoveringMeasurement,
-      notHovering: this.notHovering,
-      currentHoveredMeasurement: this.state.currentHoveredMeasurement,
-    };
-
-    return (
-      <MeasurementsManagerContext.Provider value={childrenProps}>
-        {this.props.children}
-      </MeasurementsManagerContext.Provider>
-    );
-  }
-}
-
-export const Consumer = MeasurementsManagerContext.Consumer;
diff --git a/src/sentry/static/sentry/app/components/events/interfaces/spans/measurementsPanel.tsx b/src/sentry/static/sentry/app/components/events/interfaces/spans/measurementsPanel.tsx
index 53a05897e1c255..10e35bdb0a9db0 100644
--- a/src/sentry/static/sentry/app/components/events/interfaces/spans/measurementsPanel.tsx
+++ b/src/sentry/static/sentry/app/components/events/interfaces/spans/measurementsPanel.tsx
@@ -9,7 +9,6 @@ import {
   WEB_VITAL_ACRONYMS,
 } from 'app/views/performance/transactionVitals/constants';
 
-import * as MeasurementsManager from './measurementsManager';
 import {
   getMeasurementBounds,
   getMeasurements,
@@ -47,8 +46,6 @@ class MeasurementsPanel extends React.PureComponent<Props> {
 
           const names = Object.keys(verticalMark.marks);
 
-          const hoverMeasurementName = names.join('');
-
           // generate vertical marker label
           const acronyms = names.map(name => WEB_VITAL_ACRONYMS[name]);
           const lastAcronym = acronyms.pop() as string;
@@ -64,25 +61,13 @@ class MeasurementsPanel extends React.PureComponent<Props> {
             : lastName;
 
           return (
-            <MeasurementsManager.Consumer key={String(timestamp)}>
-              {({hoveringMeasurement, notHovering}) => {
-                return (
-                  <LabelContainer
-                    key={label}
-                    failedThreshold={verticalMark.failedThreshold}
-                    label={label}
-                    tooltipLabel={tooltipLabel}
-                    left={toPercent(bounds.left || 0)}
-                    onMouseLeave={() => {
-                      notHovering();
-                    }}
-                    onMouseOver={() => {
-                      hoveringMeasurement(hoverMeasurementName);
-                    }}
-                  />
-                );
-              }}
-            </MeasurementsManager.Consumer>
+            <LabelContainer
+              key={String(timestamp)}
+              failedThreshold={verticalMark.failedThreshold}
+              label={label}
+              tooltipLabel={tooltipLabel}
+              left={toPercent(bounds.left || 0)}
+            />
           );
         })}
       </Container>
@@ -118,8 +103,6 @@ type LabelContainerProps = {
   left: string;
   label: string;
   tooltipLabel: string;
-  onMouseLeave: () => void;
-  onMouseOver: () => void;
   failedThreshold: boolean;
 };
 
@@ -145,14 +128,7 @@ class LabelContainer extends React.Component<LabelContainerProps> {
   elementDOMRef = React.createRef<HTMLDivElement>();
 
   render() {
-    const {
-      left,
-      onMouseLeave,
-      onMouseOver,
-      label,
-      tooltipLabel,
-      failedThreshold,
-    } = this.props;
+    const {left, label, tooltipLabel, failedThreshold} = this.props;
 
     return (
       <StyledLabelContainer
@@ -160,12 +136,6 @@ class LabelContainer extends React.Component<LabelContainerProps> {
         style={{
           left: `clamp(calc(0.5 * ${this.state.width}px), ${left}, calc(100% - 0.5 * ${this.state.width}px))`,
         }}
-        onMouseLeave={() => {
-          onMouseLeave();
-        }}
-        onMouseOver={() => {
-          onMouseOver();
-        }}
       >
         <Label failedThreshold={failedThreshold}>
           <Tooltip
diff --git a/src/sentry/static/sentry/app/components/events/interfaces/spans/scrollbarManager.tsx b/src/sentry/static/sentry/app/components/events/interfaces/spans/scrollbarManager.tsx
new file mode 100644
index 00000000000000..71ad61c0daf8e3
--- /dev/null
+++ b/src/sentry/static/sentry/app/components/events/interfaces/spans/scrollbarManager.tsx
@@ -0,0 +1,451 @@
+import React from 'react';
+
+import {DragManagerChildrenProps} from './dragManager';
+import {
+  clamp,
+  rectOfContent,
+  setBodyUserSelect,
+  toPercent,
+  UserSelectValues,
+} from './utils';
+
+export type ScrollbarManagerChildrenProps = {
+  generateScrollableSpanBarRef: () => (instance: HTMLDivElement | null) => void;
+  generateContentSpanBarRef: () => (instance: HTMLDivElement | null) => void;
+  virtualScrollbarRef: React.RefObject<HTMLDivElement>;
+  onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};
+
+const ScrollbarManagerContext = React.createContext<ScrollbarManagerChildrenProps>({
+  generateScrollableSpanBarRef: () => () => undefined,
+  generateContentSpanBarRef: () => () => undefined,
+  virtualScrollbarRef: React.createRef<HTMLDivElement>(),
+  onDragStart: () => {},
+});
+
+const selectRefs = (
+  refs: Set<HTMLDivElement> | React.RefObject<HTMLDivElement>,
+  transform: (dividerDOM: HTMLDivElement) => void
+) => {
+  if (!(refs instanceof Set)) {
+    if (refs.current) {
+      transform(refs.current);
+    }
+
+    return;
+  }
+
+  refs.forEach(element => {
+    if (document.body.contains(element)) {
+      transform(element);
+    }
+  });
+};
+
+// simple linear interpolation between start and end such that needle is between [0, 1]
+const lerp = (start: number, end: number, needle: number) => {
+  return start + needle * (end - start);
+};
+
+type Props = {
+  children: React.ReactNode;
+  dividerPosition: number;
+  dragProps: DragManagerChildrenProps;
+
+  // this is the DOM element where the drag events occur. it's also the reference point
+  // for calculating the relative mouse x coordinate.
+  interactiveLayerRef: React.RefObject<HTMLDivElement>;
+};
+
+type State = {
+  maxContentWidth: number | undefined;
+};
+
+export class Provider extends React.Component<Props, State> {
+  state: State = {
+    maxContentWidth: undefined,
+  };
+
+  componentDidMount() {
+    // React will guarantee that refs are set before componentDidMount() is called;
+    // but only for DOM elements that actually got rendered
+
+    this.initializeScrollState();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.dividerPosition !== prevProps.dividerPosition) {
+      // Find any span bar and adjust the virtual scroll bar's scroll position
+      // with respect to this span bar.
+
+      if (this.scrollableSpanBar.size === 0) {
+        return;
+      }
+
+      const spanBarDOM = this.getReferenceSpanBar();
+      if (spanBarDOM) {
+        this.syncVirtualScrollbar(spanBarDOM);
+      }
+
+      return;
+    }
+
+    // If the window was selected via the minimap, then re-initialize the scroll state.
+
+    const viewWindowChanged =
+      prevProps.dragProps.viewWindowStart !== this.props.dragProps.viewWindowStart ||
+      prevProps.dragProps.viewWindowEnd !== this.props.dragProps.viewWindowEnd;
+
+    if (viewWindowChanged) {
+      this.initializeScrollState();
+    }
+  }
+
+  componentWillUnmount() {
+    this.cleanUpListeners();
+  }
+
+  scrollableSpanBar: Set<HTMLDivElement> = new Set();
+  contentSpanBar: Set<HTMLDivElement> = new Set();
+  virtualScrollbar: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
+  isDragging: boolean = false;
+  previousUserSelect: UserSelectValues | null = null;
+
+  getReferenceSpanBar() {
+    for (const currentSpanBar of this.scrollableSpanBar) {
+      const isHidden = currentSpanBar.offsetParent === null;
+      if (!document.body.contains(currentSpanBar) || isHidden) {
+        continue;
+      }
+      return currentSpanBar;
+    }
+
+    return undefined;
+  }
+
+  initializeScrollState() {
+    if (this.scrollableSpanBar.size === 0 || this.contentSpanBar.size === 0) {
+      return;
+    }
+
+    // set initial scroll state for all scrollable spanbars
+    selectRefs(this.scrollableSpanBar, (spanBarDOM: HTMLDivElement) => {
+      spanBarDOM.scrollLeft = 0;
+    });
+
+    // reset all span bar content containers to their natural widths
+    selectRefs(this.contentSpanBar, (spanBarDOM: HTMLDivElement) => {
+      spanBarDOM.style.removeProperty('width');
+      spanBarDOM.style.removeProperty('max-width');
+    });
+
+    // Find the maximum content width. We set each content spanbar to be this maximum width,
+    // such that all content spanbar widths are uniform.
+    const maxContentWidth = Array.from(this.scrollableSpanBar).reduce(
+      (currentMaxWidth, currentSpanBar) => {
+        const isHidden = currentSpanBar.offsetParent === null;
+        if (!document.body.contains(currentSpanBar) || isHidden) {
+          return currentMaxWidth;
+        }
+
+        const maybeMaxWidth = currentSpanBar.scrollWidth;
+
+        if (maybeMaxWidth > currentMaxWidth) {
+          return maybeMaxWidth;
+        }
+
+        return currentMaxWidth;
+      },
+      0
+    );
+
+    selectRefs(this.contentSpanBar, (spanBarDOM: HTMLDivElement) => {
+      spanBarDOM.style.width = `${maxContentWidth}px`;
+      spanBarDOM.style.maxWidth = `${maxContentWidth}px`;
+    });
+
+    this.scrollableSpanBar.forEach(currentSpanBarRef => {
+      this.unregisterEventListeners(currentSpanBarRef);
+    });
+
+    const spanBarDOM = this.getReferenceSpanBar();
+
+    if (spanBarDOM) {
+      this.syncVirtualScrollbar(spanBarDOM);
+    }
+
+    this.scrollableSpanBar.forEach(currentSpanBarRef => {
+      this.registerEventListeners(currentSpanBarRef);
+    });
+  }
+
+  registerEventListeners = (spanbar: HTMLDivElement) => {
+    spanbar.onscroll = this.handleScroll.bind(this, spanbar);
+  };
+
+  unregisterEventListeners = (spanbar: HTMLDivElement) => {
+    spanbar.onscroll = null;
+  };
+
+  handleScroll = (spanbar: HTMLDivElement) => {
+    window.requestAnimationFrame(() => {
+      this.syncScrollPositions(spanbar);
+    });
+  };
+
+  syncScrollPositions = (scrolledSpanBar: HTMLDivElement) => {
+    // Sync scroll positions of all span bars with respect to scrolledSpanBar's
+    // scroll position
+
+    selectRefs(this.scrollableSpanBar, (spanBarDOM: HTMLDivElement) => {
+      if (scrolledSpanBar === spanBarDOM) {
+        // Don't sync scrolledSpanBar's scroll position with itself
+        return;
+      }
+
+      this.unregisterEventListeners(spanBarDOM);
+      this.syncScrollPosition(scrolledSpanBar, spanBarDOM);
+      this.syncVirtualScrollbar(scrolledSpanBar);
+
+      window.requestAnimationFrame(() => {
+        this.registerEventListeners(spanBarDOM);
+      });
+    });
+  };
+
+  syncScrollPosition = (scrolledSpanBar: HTMLDivElement, spanBarDOM: HTMLDivElement) => {
+    // sync spanBarDOM's scroll position with respect to scrolledSpanBar's
+    // scroll position
+
+    const {scrollLeft, scrollWidth, clientWidth} = scrolledSpanBar;
+
+    const scrollLeftOffset = scrollWidth - clientWidth;
+
+    if (scrollLeftOffset > 0) {
+      spanBarDOM.scrollLeft = scrollLeft;
+    }
+  };
+
+  syncVirtualScrollbar = (scrolledSpanBar: HTMLDivElement) => {
+    // sync the virtual scrollbar's scroll position with respect to scrolledSpanBar's
+    // scroll position
+
+    if (!this.virtualScrollbar.current || !this.hasInteractiveLayer()) {
+      return;
+    }
+
+    const virtualScrollbarDOM = this.virtualScrollbar.current;
+
+    const maxContentWidth = scrolledSpanBar.scrollWidth;
+
+    if (maxContentWidth === undefined || maxContentWidth <= 0) {
+      virtualScrollbarDOM.style.width = '0';
+      return;
+    }
+
+    const visibleWidth = scrolledSpanBar.getBoundingClientRect().width;
+    // This is the scroll width of the content not visible on the screen due to overflow.
+    const maxScrollDistance = scrolledSpanBar.scrollWidth - scrolledSpanBar.clientWidth;
+
+    const virtualScrollbarWidth = visibleWidth / (visibleWidth + maxScrollDistance);
+
+    if (virtualScrollbarWidth >= 1) {
+      virtualScrollbarDOM.style.width = '0';
+      return;
+    }
+
+    virtualScrollbarDOM.style.width = `max(50px, ${toPercent(virtualScrollbarWidth)})`;
+
+    const rect = rectOfContent(this.props.interactiveLayerRef.current!);
+    const virtualScrollBarRect = rectOfContent(virtualScrollbarDOM);
+    const maxVirtualScrollableArea = 1 - virtualScrollBarRect.width / rect.width;
+
+    // Assume scrollbarLeftOffset = lerp(0, maxScrollDistance, virtualScrollPercentage).
+    // Then solve for virtualScrollPercentage.
+    const virtualScrollPercentage = clamp(
+      scrolledSpanBar.scrollLeft / maxScrollDistance,
+      0,
+      1
+    );
+    const virtualScrollbarPosition = virtualScrollPercentage * maxVirtualScrollableArea;
+
+    virtualScrollbarDOM.style.left = `clamp(0%, calc(${toPercent(
+      virtualScrollbarPosition
+    )}), calc(100% - max(50px, ${toPercent(virtualScrollbarWidth)})))`;
+  };
+
+  generateScrollableSpanBarRef = () => {
+    let previousInstance: HTMLDivElement | null = null;
+
+    const addScrollableSpanBarRef = (instance: HTMLDivElement | null) => {
+      if (previousInstance) {
+        this.scrollableSpanBar.delete(previousInstance);
+        previousInstance = null;
+      }
+
+      if (instance) {
+        this.scrollableSpanBar.add(instance);
+        previousInstance = instance;
+      }
+    };
+
+    return addScrollableSpanBarRef;
+  };
+
+  generateContentSpanBarRef = () => {
+    let previousInstance: HTMLDivElement | null = null;
+
+    const addContentSpanBarRef = (instance: HTMLDivElement | null) => {
+      if (previousInstance) {
+        this.contentSpanBar.delete(previousInstance);
+        previousInstance = null;
+      }
+
+      if (instance) {
+        this.contentSpanBar.add(instance);
+        previousInstance = instance;
+      }
+    };
+
+    return addContentSpanBarRef;
+  };
+
+  hasInteractiveLayer = (): boolean => !!this.props.interactiveLayerRef.current;
+  initialMouseClickX: number | undefined = undefined;
+
+  onDragStart = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (
+      this.isDragging ||
+      event.type !== 'mousedown' ||
+      !this.hasInteractiveLayer() ||
+      !this.virtualScrollbar.current
+    ) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    const virtualScrollbarRect = rectOfContent(this.virtualScrollbar.current);
+
+    // get intitial x-coordinate of the mouse click on the virtual scrollbar
+    this.initialMouseClickX = Math.abs(event.clientX - virtualScrollbarRect.x);
+
+    // prevent the user from selecting things outside the minimap when dragging
+    // the mouse cursor inside the minimap
+    this.previousUserSelect = setBodyUserSelect({
+      userSelect: 'none',
+      MozUserSelect: 'none',
+      msUserSelect: 'none',
+      webkitUserSelect: 'none',
+    });
+
+    // attach event listeners so that the mouse cursor does not select text during a drag
+    window.addEventListener('mousemove', this.onDragMove);
+    window.addEventListener('mouseup', this.onDragEnd);
+
+    // indicate drag has begun
+
+    this.isDragging = true;
+
+    selectRefs(this.virtualScrollbar, dividerDOM => {
+      dividerDOM.classList.add('dragging');
+    });
+  };
+
+  onDragMove = (event: MouseEvent) => {
+    if (
+      !this.isDragging ||
+      event.type !== 'mousemove' ||
+      !this.hasInteractiveLayer() ||
+      !this.virtualScrollbar.current ||
+      this.initialMouseClickX === undefined
+    ) {
+      return;
+    }
+
+    const virtualScrollbarDOM = this.virtualScrollbar.current;
+
+    const rect = rectOfContent(this.props.interactiveLayerRef.current!);
+    const virtualScrollBarRect = rectOfContent(virtualScrollbarDOM);
+
+    // Mouse x-coordinate relative to the interactive layer's left side
+    const localDragX = event.pageX - rect.x;
+    // The drag movement with respect to the interactive layer's width.
+    const rawMouseX = (localDragX - this.initialMouseClickX) / rect.width;
+
+    const maxVirtualScrollableArea = 1 - virtualScrollBarRect.width / rect.width;
+
+    // clamp rawMouseX to be within [0, 1]
+    const virtualScrollbarPosition = clamp(rawMouseX, 0, 1);
+
+    virtualScrollbarDOM.style.left = `clamp(0%, calc(${toPercent(
+      virtualScrollbarPosition
+    )}), ${toPercent(maxVirtualScrollableArea)})`;
+
+    const virtualScrollPercentage = clamp(rawMouseX / maxVirtualScrollableArea, 0, 1);
+
+    // Update scroll positions of all the span bars
+
+    selectRefs(this.scrollableSpanBar, (spanBarDOM: HTMLDivElement) => {
+      this.unregisterEventListeners(spanBarDOM);
+
+      const maxScrollDistance = spanBarDOM.scrollWidth - spanBarDOM.clientWidth;
+
+      spanBarDOM.scrollLeft = lerp(0, maxScrollDistance, virtualScrollPercentage);
+
+      window.requestAnimationFrame(() => {
+        this.registerEventListeners(spanBarDOM);
+      });
+    });
+  };
+
+  onDragEnd = (event: MouseEvent) => {
+    if (!this.isDragging || event.type !== 'mouseup' || !this.hasInteractiveLayer()) {
+      return;
+    }
+
+    // remove listeners that were attached in onDragStart
+
+    this.cleanUpListeners();
+
+    // restore body styles
+
+    if (this.previousUserSelect) {
+      setBodyUserSelect(this.previousUserSelect);
+      this.previousUserSelect = null;
+    }
+
+    // indicate drag has ended
+
+    this.isDragging = false;
+
+    selectRefs(this.virtualScrollbar, dividerDOM => {
+      dividerDOM.classList.remove('dragging');
+    });
+  };
+
+  cleanUpListeners = () => {
+    if (this.isDragging) {
+      // we only remove listeners during a drag
+      window.removeEventListener('mousemove', this.onDragMove);
+      window.removeEventListener('mouseup', this.onDragEnd);
+    }
+  };
+
+  render() {
+    const childrenProps: ScrollbarManagerChildrenProps = {
+      generateScrollableSpanBarRef: this.generateScrollableSpanBarRef,
+      generateContentSpanBarRef: this.generateContentSpanBarRef,
+      onDragStart: this.onDragStart,
+      virtualScrollbarRef: this.virtualScrollbar,
+    };
+
+    return (
+      <ScrollbarManagerContext.Provider value={childrenProps}>
+        {this.props.children}
+      </ScrollbarManagerContext.Provider>
+    );
+  }
+}
+
+export const Consumer = ScrollbarManagerContext.Consumer;
diff --git a/src/sentry/static/sentry/app/components/events/interfaces/spans/spanBar.tsx b/src/sentry/static/sentry/app/components/events/interfaces/spans/spanBar.tsx
index bcc2573b5c13d1..976a8aad40a5c7 100644
--- a/src/sentry/static/sentry/app/components/events/interfaces/spans/spanBar.tsx
+++ b/src/sentry/static/sentry/app/components/events/interfaces/spans/spanBar.tsx
@@ -20,7 +20,7 @@ import {
   MINIMAP_SPAN_BAR_HEIGHT,
   NUM_OF_SPANS_FIT_IN_MINI_MAP,
 } from './header';
-import * as MeasurementsManager from './measurementsManager';
+import * as ScrollbarManager from './scrollbarManager';
 import SpanDetail from './spanDetail';
 import {
   getHatchPattern,
@@ -363,8 +363,6 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
     return (
       <React.Fragment>
         {Array.from(measurements).map(([timestamp, verticalMark]) => {
-          const names = Object.keys(verticalMark.marks);
-
           const bounds = getMeasurementBounds(timestamp, generateBounds);
 
           const shouldDisplay = defined(bounds.left) && defined(bounds.width);
@@ -373,30 +371,14 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
             return null;
           }
 
-          const measurementName = names.join('');
-
           return (
-            <MeasurementsManager.Consumer key={String(timestamp)}>
-              {({hoveringMeasurement, notHovering}) => {
-                return (
-                  <MeasurementMarker
-                    style={{
-                      left: `clamp(0%, ${toPercent(bounds.left || 0)}, calc(100% - 1px))`,
-                    }}
-                    failedThreshold={verticalMark.failedThreshold}
-                    onMouseEnter={() => {
-                      hoveringMeasurement(measurementName);
-                    }}
-                    onMouseLeave={() => {
-                      notHovering();
-                    }}
-                    onMouseOver={() => {
-                      hoveringMeasurement(measurementName);
-                    }}
-                  />
-                );
+            <MeasurementMarker
+              key={String(timestamp)}
+              style={{
+                left: `clamp(0%, ${toPercent(bounds.left || 0)}, calc(100% - 1px))`,
               }}
-            </MeasurementsManager.Consumer>
+              failedThreshold={verticalMark.failedThreshold}
+            />
           );
         })}
       </React.Fragment>
@@ -515,7 +497,13 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
     );
   }
 
-  renderTitle() {
+  renderTitle(
+    scrollbarManagerChildrenProps: ScrollbarManager.ScrollbarManagerChildrenProps
+  ) {
+    const {
+      generateContentSpanBarRef,
+      generateScrollableSpanBarRef,
+    } = scrollbarManagerChildrenProps;
     const {span, treeDepth, spanErrors} = this.props;
 
     const operationName = getSpanOperation(span) ? (
@@ -531,20 +519,22 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
     const left = treeDepth * (TOGGLE_BORDER_BOX / 2) + MARGIN_LEFT;
 
     return (
-      <SpanBarTitleContainer>
-        {this.renderSpanTreeToggler({left})}
-        <SpanBarTitle
-          style={{
-            left: `${left}px`,
-            width: '100%',
-          }}
-        >
-          <span>
-            {operationName}
-            {description}
-          </span>
-        </SpanBarTitle>
-      </SpanBarTitleContainer>
+      <ScrollableSpanBar ref={generateScrollableSpanBarRef()}>
+        <SpanBarTitleContainer ref={generateContentSpanBarRef()}>
+          {this.renderSpanTreeToggler({left})}
+          <SpanBarTitle
+            style={{
+              left: `${left}px`,
+              width: '100%',
+            }}
+          >
+            <span>
+              {operationName}
+              {description}
+            </span>
+          </SpanBarTitle>
+        </SpanBarTitleContainer>
+      </ScrollableSpanBar>
     );
   }
 
@@ -802,9 +792,13 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
     );
   }
 
-  renderHeader(
-    dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
-  ) {
+  renderHeader({
+    scrollbarManagerChildrenProps,
+    dividerHandlerChildrenProps,
+  }: {
+    dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps;
+    scrollbarManagerChildrenProps: ScrollbarManager.ScrollbarManagerChildrenProps;
+  }) {
     const {span, spanBarColour, spanBarHatch, spanNumber} = this.props;
     const startTimestamp: number = span.start_timestamp;
     const endTimestamp: number = span.timestamp;
@@ -822,12 +816,13 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
           showDetail={this.state.showDetail}
           style={{
             width: `calc(${toPercent(dividerPosition)} - 0.5px)`,
+            paddingTop: 0,
           }}
           onClick={() => {
             this.toggleDisplayDetail();
           }}
         >
-          {this.renderTitle()}
+          {this.renderTitle(scrollbarManagerChildrenProps)}
         </SpanRowCell>
         {this.renderDivider(dividerHandlerChildrenProps)}
         <SpanRowCell
@@ -903,11 +898,23 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
         showBorder={this.state.showDetail}
         data-test-id="span-row"
       >
-        <DividerHandlerManager.Consumer>
-          {(
-            dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
-          ) => this.renderHeader(dividerHandlerChildrenProps)}
-        </DividerHandlerManager.Consumer>
+        <ScrollbarManager.Consumer>
+          {scrollbarManagerChildrenProps => {
+            return (
+              <DividerHandlerManager.Consumer>
+                {(
+                  dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
+                ) =>
+                  this.renderHeader({
+                    dividerHandlerChildrenProps,
+                    scrollbarManagerChildrenProps,
+                  })
+                }
+              </DividerHandlerManager.Consumer>
+            );
+          }}
+        </ScrollbarManager.Consumer>
+
         {this.renderDetail({isVisible: isSpanVisible})}
       </SpanRow>
     );
@@ -933,6 +940,9 @@ export const SpanRowCellContainer = styled('div')<SpanRowCellProps>`
   position: relative;
   height: ${SPAN_ROW_HEIGHT}px;
 
+  /* for virtual scrollbar */
+  overflow: hidden;
+
   user-select: none;
 
   &:hover > div[data-type='span-row-cell'] {
@@ -993,7 +1003,7 @@ export const DividerLineGhostContainer = styled('div')`
 export const SpanBarTitleContainer = styled('div')`
   display: flex;
   align-items: center;
-  height: 100%;
+  height: ${SPAN_ROW_HEIGHT}px;
   position: absolute;
   left: 0;
   top: 0;
@@ -1011,6 +1021,15 @@ export const SpanBarTitle = styled('div')`
   align-items: center;
 `;
 
+const ScrollableSpanBar = styled('div')`
+  position: relative;
+  /* increase span bar height such that the horizontal scrollbar is out of view */
+  height: ${SPAN_ROW_HEIGHT + 50}px;
+  /* for virtual scrollbar */
+  overflow-y: hidden;
+  overflow-x: scroll;
+`;
+
 type TogglerTypes = OmitHtmlDivProps<{
   hasToggler?: boolean;
   isLast?: boolean;
diff --git a/src/sentry/static/sentry/app/components/events/interfaces/spans/spanTree.tsx b/src/sentry/static/sentry/app/components/events/interfaces/spans/spanTree.tsx
index 0d93ebb35dc19e..1021324c5996f8 100644
--- a/src/sentry/static/sentry/app/components/events/interfaces/spans/spanTree.tsx
+++ b/src/sentry/static/sentry/app/components/events/interfaces/spans/spanTree.tsx
@@ -8,8 +8,7 @@ import {TableData} from 'app/utils/discover/discoverQuery';
 import * as DividerHandlerManager from './dividerHandlerManager';
 import {DragManagerChildrenProps} from './dragManager';
 import {ActiveOperationFilter} from './filter';
-import * as MeasurementsManager from './measurementsManager';
-import MeasurementsPanel from './measurementsPanel';
+import {DividerLine} from './spanBar';
 import SpanGroup from './spanGroup';
 import {SpanRowMessage} from './styles';
 import {FilterSpans} from './traceView';
@@ -34,7 +33,6 @@ import {
   pickSpanBarColour,
   SpanBoundsType,
   SpanGeneratedBoundsType,
-  toPercent,
 } from './utils';
 
 type RenderedSpanTree = {
@@ -53,6 +51,7 @@ type PropType = {
   event: SentryTransactionEvent;
   spansWithErrors: TableData | null | undefined;
   operationNameFilters: ActiveOperationFilter;
+  traceViewRef: React.RefObject<HTMLDivElement>;
 };
 
 class SpanTree extends React.Component<PropType> {
@@ -64,8 +63,6 @@ class SpanTree extends React.Component<PropType> {
     return true;
   }
 
-  traceViewRef = React.createRef<HTMLDivElement>();
-
   generateInfoMessage(input: {
     isCurrentSpanHidden: boolean;
     numOfSpansOutOfViewAbove: number;
@@ -383,41 +380,33 @@ class SpanTree extends React.Component<PropType> {
     });
   };
 
-  renderSecondaryPanel() {
-    const {event} = this.props;
-
-    const hasMeasurements = Object.keys(event.measurements ?? {}).length > 0;
-
-    // only display the secondary header if there are any measurements
-    if (!hasMeasurements) {
-      return null;
-    }
+  renderDivider(
+    dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
+  ) {
+    const {addDividerLineRef} = dividerHandlerChildrenProps;
 
     return (
-      <DividerHandlerManager.Consumer>
-        {(
-          dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
-        ) => {
-          const {dividerPosition} = dividerHandlerChildrenProps;
-
-          return (
-            <SecondaryHeader>
-              <div
-                style={{
-                  // the width of this component is shrunk to compensate for half of the width of the divider line
-                  width: `calc(${toPercent(dividerPosition)} - 0.5px)`,
-                }}
-              />
-              <DividerSpacer />
-              <MeasurementsPanel
-                event={event}
-                generateBounds={this.generateBounds()}
-                dividerPosition={dividerPosition}
-              />
-            </SecondaryHeader>
-          );
+      <DividerLine
+        ref={addDividerLineRef()}
+        style={{
+          position: 'relative',
+        }}
+        onMouseEnter={() => {
+          dividerHandlerChildrenProps.setHover(true);
+        }}
+        onMouseLeave={() => {
+          dividerHandlerChildrenProps.setHover(false);
         }}
-      </DividerHandlerManager.Consumer>
+        onMouseOver={() => {
+          dividerHandlerChildrenProps.setHover(true);
+        }}
+        onMouseDown={dividerHandlerChildrenProps.onDragStart}
+        onClick={event => {
+          // we prevent the propagation of the clicks from this component to prevent
+          // the span detail from being opened.
+          event.stopPropagation();
+        }}
+      />
     );
   }
 
@@ -438,16 +427,11 @@ class SpanTree extends React.Component<PropType> {
     const limitExceededMessage = this.generateLimitExceededMessage();
 
     return (
-      <DividerHandlerManager.Provider interactiveLayerRef={this.traceViewRef}>
-        <MeasurementsManager.Provider>
-          {this.renderSecondaryPanel()}
-          <TraceViewContainer ref={this.traceViewRef}>
-            {spanTree}
-            {infoMessage}
-            {limitExceededMessage}
-          </TraceViewContainer>
-        </MeasurementsManager.Provider>
-      </DividerHandlerManager.Provider>
+      <TraceViewContainer ref={this.props.traceViewRef}>
+        {spanTree}
+        {infoMessage}
+        {limitExceededMessage}
+      </TraceViewContainer>
     );
   }
 }
@@ -458,17 +442,6 @@ const TraceViewContainer = styled('div')`
   border-bottom-right-radius: 3px;
 `;
 
-const SecondaryHeader = styled('div')`
-  background-color: ${p => p.theme.backgroundSecondary};
-  display: flex;
-
-  border-bottom: 1px solid ${p => p.theme.gray200};
-`;
-
-const DividerSpacer = styled('div')`
-  width: 1px;
-`;
-
 /**
  * Checks if a trace contains all of its spans.
  *
diff --git a/src/sentry/static/sentry/app/components/events/interfaces/spans/traceView.tsx b/src/sentry/static/sentry/app/components/events/interfaces/spans/traceView.tsx
index 1e4ab458ee6751..a77d015f04a6fa 100644
--- a/src/sentry/static/sentry/app/components/events/interfaces/spans/traceView.tsx
+++ b/src/sentry/static/sentry/app/components/events/interfaces/spans/traceView.tsx
@@ -8,9 +8,11 @@ import {createFuzzySearch} from 'app/utils/createFuzzySearch';
 import {TableData} from 'app/utils/discover/discoverQuery';
 
 import * as CursorGuideHandler from './cursorGuideHandler';
+import * as DividerHandlerManager from './dividerHandlerManager';
 import DragManager, {DragManagerChildrenProps} from './dragManager';
 import {ActiveOperationFilter} from './filter';
 import TraceViewHeader from './header';
+import * as ScrollbarManager from './scrollbarManager';
 import SpanTree from './spanTree';
 import {ParsedTraceType, RawSpanType} from './types';
 import {generateRootSpan, getSpanID, getTraceContext} from './utils';
@@ -65,6 +67,8 @@ class TraceView extends React.PureComponent<Props, State> {
     }
   }
 
+  traceViewRef = React.createRef<HTMLDivElement>();
+  virtualScrollBarContainerRef = React.createRef<HTMLDivElement>();
   minimapInteractiveRef = React.createRef<HTMLDivElement>();
 
   async filterOnSpans(searchQuery: string | undefined) {
@@ -171,6 +175,8 @@ class TraceView extends React.PureComponent<Props, State> {
       minimapInteractiveRef={this.minimapInteractiveRef}
       dragProps={dragProps}
       trace={parsedTrace}
+      event={this.props.event}
+      virtualScrollBarContainerRef={this.virtualScrollBarContainerRef}
     />
   );
 
@@ -195,17 +201,32 @@ class TraceView extends React.PureComponent<Props, State> {
             dragProps={dragProps}
             trace={parsedTrace}
           >
-            {this.renderHeader(dragProps, parsedTrace)}
-            <SpanTree
-              event={event}
-              trace={parsedTrace}
-              dragProps={dragProps}
-              filterSpans={this.state.filterSpans}
-              orgId={orgId}
-              organization={organization}
-              spansWithErrors={spansWithErrors}
-              operationNameFilters={operationNameFilters}
-            />
+            <DividerHandlerManager.Provider interactiveLayerRef={this.traceViewRef}>
+              <DividerHandlerManager.Consumer>
+                {dividerHandlerChildrenProps => {
+                  return (
+                    <ScrollbarManager.Provider
+                      dividerPosition={dividerHandlerChildrenProps.dividerPosition}
+                      interactiveLayerRef={this.virtualScrollBarContainerRef}
+                      dragProps={dragProps}
+                    >
+                      {this.renderHeader(dragProps, parsedTrace)}
+                      <SpanTree
+                        traceViewRef={this.traceViewRef}
+                        event={event}
+                        trace={parsedTrace}
+                        dragProps={dragProps}
+                        filterSpans={this.state.filterSpans}
+                        orgId={orgId}
+                        organization={organization}
+                        spansWithErrors={spansWithErrors}
+                        operationNameFilters={operationNameFilters}
+                      />
+                    </ScrollbarManager.Provider>
+                  );
+                }}
+              </DividerHandlerManager.Consumer>
+            </DividerHandlerManager.Provider>
           </CursorGuideHandler.Provider>
         )}
       </DragManager>