--- a/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -50,16 +50,22 @@ class AnimatedPropertyListContainer exte
           addAnimationsCurrentTimeListener,
           animation,
           getAnimationsCurrentTime,
           removeAnimationsCurrentTimeListener,
           simulateAnimationForKeyframesProgressBar,
           timeScale,
         }
       ),
+      dom.div(
+        {
+          className: "animated-property-list-background",
+        },
+        dom.span()
+      ),
       AnimatedPropertyList(
         {
           animation,
           emitEventForTest,
           getAnimatedPropertyMap,
           getComputedStyle,
           simulateAnimation,
         }

--- a/devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
@@ -30,18 +30,23 @@ class AnimatedPropertyListHeader extends
       getAnimationsCurrentTime,
       removeAnimationsCurrentTimeListener,
       simulateAnimationForKeyframesProgressBar,
       timeScale,
     } = this.props;
 
     return dom.div(
       {
-        className: "animated-property-list-header devtools-toolbar"
+        className: "animated-property-list-header"
       },
+      dom.div(
+        {
+          className: "devtools-toolbar"
+        }
+      ),
       KeyframesProgressTickList(),
       KeyframesProgressBar(
         {
           addAnimationsCurrentTimeListener,
           animation,
           getAnimationsCurrentTime,
           removeAnimationsCurrentTimeListener,
           simulateAnimationForKeyframesProgressBar,

--- a/devtools/client/inspector/animation/components/AnimationListHeader.js
+++ b/devtools/client/inspector/animation/components/AnimationListHeader.js
@@ -28,18 +28,23 @@ class AnimationListHeader extends PureCo
       addAnimationsCurrentTimeListener,
       removeAnimationsCurrentTimeListener,
       setAnimationsCurrentTime,
       timeScale,
     } = this.props;
 
     return dom.div(
       {
-        className: "animation-list-header devtools-toolbar"
+        className: "animation-list-header"
       },
+      dom.div(
+        {
+          className: "devtools-toolbar"
+        }
+      ),
       AnimationTimelineTickList(
         {
           timeScale
         }
       ),
       CurrentTimeScrubberController(
         {
           addAnimationsCurrentTimeListener,

--- a/devtools/client/inspector/animation/components/CurrentTimeScrubberController.js
+++ b/devtools/client/inspector/animation/components/CurrentTimeScrubberController.js
@@ -35,18 +35,18 @@ class CurrentTimeScrubberController exte
       // offset of the position for the scrubber
       offset: 0,
     };
 
     addAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
   }
 
   componentDidMount() {
-    const parentEl = ReactDOM.findDOMNode(this).parentElement;
-    parentEl.addEventListener("mousedown", this.onMouseDown);
+    const el = ReactDOM.findDOMNode(this);
+    el.addEventListener("mousedown", this.onMouseDown);
   }
 
   componentWillUnmount() {
     const { removeAnimationsCurrentTimeListener } = this.props;
     removeAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
   }
 
   onCurrentTimeUpdated(currentTime) {
@@ -122,17 +122,17 @@ class CurrentTimeScrubberController exte
     setAnimationsCurrentTime(time, needRefresh);
   }
 
   render() {
     const { offset } = this.state;
 
     return dom.div(
       {
-        className: "current-time-scrubber-controller devtools-toolbar",
+        className: "current-time-scrubber-controller",
       },
       CurrentTimeScrubber(
         {
           offset,
         }
       )
     );
   }

--- a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -23,48 +23,48 @@ add_task(async function() {
   const timeScale = new TimeScale(animationInspector.state.animations);
 
   info("Checking animation list header element existence");
   const listContainerEl = panel.querySelector(".animation-list-container");
   const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar");
   ok(listHeaderEl, "The header element should be in animation list container element");
 
   info("Checking time tick item elements existence");
-  assertTimelineTickItems(timeScale, listHeaderEl);
+  assertTimelineTickItems(timeScale, listContainerEl);
   const timelineTickItemLength =
-    listHeaderEl.querySelectorAll(".animation-timeline-tick-item").length;
+    listContainerEl.querySelectorAll(".animation-timeline-tick-item").length;
 
   info("Checking timeline tick item elements after enlarge sidebar width");
   await setSidebarWidth("100%", inspector);
-  assertTimelineTickItems(timeScale, listHeaderEl);
+  assertTimelineTickItems(timeScale, listContainerEl);
   ok(timelineTickItemLength <
-    listHeaderEl.querySelectorAll(".animation-timeline-tick-item").length,
+     listContainerEl.querySelectorAll(".animation-timeline-tick-item").length,
      "The timeline tick item elements should increase");
 });
 
 /**
  * Assert timeline tick item's position and label.
  *
  * @param {TimeScale} - timeScale
- * @param {Element} - listHeaderEl which is header element
+ * @param {Element} - listContainerEl
  */
-function assertTimelineTickItems(timeScale, listHeaderEl) {
-  const animationTimelineTickListEl =
-    listHeaderEl.querySelector(".animation-timeline-tick-list");
-  ok(animationTimelineTickListEl,
+function assertTimelineTickItems(timeScale, listContainerEl) {
+  const timelineTickListEl =
+    listContainerEl.querySelector(".animation-timeline-tick-list");
+  ok(timelineTickListEl,
     "The animation timeline tick list element should be in header");
 
-  const width = animationTimelineTickListEl.offsetWidth;
+  const width = timelineTickListEl.offsetWidth;
   const animationDuration = timeScale.getDuration();
   const minTimeInterval = TIME_GRADUATION_MIN_SPACING * animationDuration / width;
   const interval = findOptimalTimeInterval(minTimeInterval);
   const expectedTickItem = Math.ceil(animationDuration / interval);
 
   const timelineTickItemEls =
-    listHeaderEl.querySelectorAll(".animation-timeline-tick-item");
+    timelineTickListEl.querySelectorAll(".animation-timeline-tick-item");
   is(timelineTickItemEls.length, expectedTickItem,
     "The expected number of timeline ticks were found");
 
   info("Make sure graduations are evenly distributed and show the right times");
   for (const [index, tickEl] of timelineTickItemEls.entries()) {
     const left = parseFloat(tickEl.style.left);
     const expectedPos = index * interval * 100 / animationDuration;
     is(Math.round(left), Math.round(expectedPos),

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -2,16 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Animation-inspector specific theme variables */
 
 :root {
   --animation-even-background-color: rgba(0, 0, 0, 0.05);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
+  --devtools-toolbar-height: 24px;
   --fast-track-image: url("images/animation-fast-track.svg");
   --fill-color-cssanimation: var(--theme-contrast-background);
   --fill-color-csstransition: var(--theme-highlight-blue);
   --fill-color-scriptanimation: var(--theme-graphs-green);
   --graph-right-offset: 10px;
   --keyframe-marker-shadow-color: #c4c4c4;
   --pause-image: url(chrome://devtools/skin/images/pause.svg);
   --progress-bar-color: #909090;
@@ -49,17 +50,17 @@
   overflow: hidden;
 }
 
 #animation-container:not(.animation-detail-visible) .controlled {
   display: none;
 }
 
 #animation-container .animation-container-splitter {
-  overflow: auto;
+  overflow: hidden;
 }
 
 /* Animation Toolbar */
 .animation-toolbar {
   display: flex;
 }
 
 .pause-resume-button::before {
@@ -88,59 +89,89 @@ select.playback-rate-selector.devtools-b
 }
 
 .rewind-button::before {
   background-image: var(--rewind-image);
 }
 
 /* Animation List Container */
 .animation-list-container {
-  display: flex;
-  flex-direction: column;
   height: 100%;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
   width: 100%;
   -moz-user-select: none;
 }
 
 .animation-list-container.active-scrubber {
   cursor: col-resize;
 }
 
 /* Animation List Header */
 .animation-list-header {
   display: grid;
   grid-template-columns: var(--sidebar-width) calc(100% - var(--sidebar-width) - var(--graph-right-offset)) var(--graph-right-offset);
+  line-height: var(--devtools-toolbar-height);
+  min-height: 100%;
   padding: 0;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.animation-list-header .devtools-toolbar {
+  position: absolute;
+  width: 100%;
 }
 
 /* Animation Timeline Tick List */
 .animation-timeline-tick-list {
   grid-column: 2/3;
+  height: 100%;
   position: relative;
 }
 
 .animation-timeline-tick-item {
+  height: 100%;
+  position: absolute;
+}
+
+.animation-timeline-tick-item::before {
   border-left: var(--tick-line-style);
-  height: 100vh;
-  pointer-events: none;
+  content: "";
+  height: 100%;
   position: absolute;
 }
 
 /* Current Time Scrubber */
 .current-time-scrubber-controller {
+  grid-column: 2 / 3;
+  height: 100%;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.current-time-scrubber-controller::before {
+  content: "";
   cursor: col-resize;
-  grid-column: 2 / 3;
-  padding: 0;
+  height: var(--devtools-toolbar-height);
+  pointer-events: auto;
+  position: absolute;
+  /* In order to click on edge of current-time-scrubber-controller element */
+  width: calc(100% + 1px);
 }
 
 .current-time-scrubber {
   cursor: col-resize;
-  height: 100vh;
+  height: 100%;
   margin-left: -6px;
+  pointer-events: auto;
   position: absolute;
   width: 12px;
   z-index: 1;
 }
 
 .current-time-scrubber::before {
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
@@ -158,21 +189,22 @@ select.playback-rate-selector.devtools-b
   left: 5px;
   position: absolute;
   top: 0;
   width: 0;
 }
 
 /* Animation List */
 .animation-list {
-  flex: 1;
   list-style-type: none;
   margin: 0;
-  overflow: auto;
   padding: 0;
+  position: absolute;
+  top: var(--devtools-toolbar-height);
+  width: 100%;
 }
 
 /* Animation Item */
 .animation-item {
   display: flex;
   height: 30px;
 }
 
@@ -236,18 +268,18 @@ select.playback-rate-selector.devtools-b
   content: "";
   display: block;
   fill: var(--theme-content-color3);
   height: 100%;
   position: absolute;
   right: 0;
   top: 5px;
   width: 15px;
+  -moz-context-properties: fill;
   z-index: 1;
-  -moz-context-properties: fill;
 }
 
 .animation-summary-graph-path {
   height: 100%;
   width: 100%;
 }
 
 .animation-computed-timing-path path {
@@ -365,56 +397,70 @@ select.playback-rate-selector.devtools-b
   background-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Animated Property List Container */
 .animated-property-list-container {
   display: flex;
   flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  overflow-y: auto;
+  position: relative;
 }
 
 /* Animated Property List Header */
 .animated-property-list-header {
   display: grid;
   grid-template-columns: var(--sidebar-width) calc(100% - var(--sidebar-width) - var(--graph-right-offset)) var(--graph-right-offset);
+  line-height: var(--devtools-toolbar-height);
+  min-height: 100%;
   padding: 0;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.animated-property-list-header .devtools-toolbar {
+  position: absolute;
+  width: 100%;
 }
 
 /* Keyframes Progress Tick List */
 .keyframes-progress-tick-list {
   grid-column: 2 / 3;
-  position: relative;
+  height: 100%;
+  position: absolute;
+  width: 100%;
 }
 
 .keyframes-progress-tick-item {
-  height: 100vh;
   position: absolute;
 }
 
 .keyframes-progress-tick-item.left {
   border-left: var(--tick-line-style);
 }
 
 .keyframes-progress-tick-item.right {
   border-right: var(--tick-line-style);
 }
 
 /* Keyframes Progress Bar */
 .keyframes-progress-bar-area {
   background: none;
   grid-column: 2 / 3;
   padding: 0;
-  pointer-events: none;
-  position: relative;
+  height: 100%;
+  position: absolute;
+  width: 100%;
 }
 
 .keyframes-progress-bar {
-  height: 100vh;
+  height: 100%;
   position: absolute;
   z-index: 1;
 }
 
 .keyframes-progress-bar::before {
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid var(--progress-bar-color);
@@ -430,22 +476,42 @@ select.playback-rate-selector.devtools-b
   content: "";
   height: 100%;
   position: absolute;
   top: 0;
   width: 0;
 }
 
 /* Animated Property List */
+.animated-property-list-background {
+  border-left: var(--tick-line-style);
+  border-right: var(--tick-line-style);
+  bottom: 0;
+	left: var(--sidebar-width);
+  min-height: 100%;
+	position: sticky;
+  top: 0;
+	width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
+}
+
+.animated-property-list-background span {
+  border-left: var(--tick-line-style);
+	height: 100%;
+	left: 50%;
+	position: absolute;
+}
+
 .animated-property-list {
   flex: 1;
   list-style-type: none;
   margin: 0;
-  overflow-y: auto;
   padding: 0;
+  position: absolute;
+  top: var(--devtools-toolbar-height);
+  width: 100%;
 }
 
 /* Animated Property Item */
 .animated-property-item {
   display: flex;
   height: 30px;
 }
 
@@ -498,18 +564,18 @@ select.playback-rate-selector.devtools-b
 }
 
 .animated-property-name.warning span {
   text-decoration: underline dotted;
 }
 
 /* Keyframes Graph */
 .keyframes-graph {
+  padding-top: 3px;
   height: 100%;
-  padding-top: 3px;
   position: relative;
   width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
 .keyframes-graph-path {
   height: 100%;
   width: 100%;
 }