From 64b83738ce5dfd81dc857a0b93cb91cb1ddf9d8a Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Thu, 12 Apr 2018 17:52:27 -0700
Subject: [PATCH] prevent HighlightCode from scrolling entire document

---
 src/core/components/highlight-code.jsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index a52b3fe4..c5e5f311 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -26,6 +26,24 @@ export default class HighlightCode extends Component {
     saveAs(fileToSave, "response")
   }
 
+  preventYScrollingBeyondElement = (e) => {
+    const target = e.target
+
+    var deltaY = e.nativeEvent.deltaY
+    var contentHeight = target.scrollHeight
+    var visibleHeight = target.offsetHeight
+    var scrollTop = target.scrollTop
+
+    const scrollOffset = visibleHeight + scrollTop
+
+    const isScrollingPastTop = scrollTop === 0 && deltaY < 0
+    const isScrollingPastBottom = scrollOffset >= contentHeight && deltaY > 0
+
+    if (isScrollingPastTop || isScrollingPastBottom) {
+      e.preventDefault()
+    }
+  }
+
   render () {
     let { value, className } = this.props
     className = className || ""
@@ -33,7 +51,12 @@ export default class HighlightCode extends Component {
     return (
       <div className="highlight-code">
         <div className="download-contents" onClick={this.downloadJSON}>Download</div>
-        <pre ref={this.initializeComponent} className={className + " microlight"}>{value}</pre>
+        <pre
+          ref={this.initializeComponent}
+          onWheel={this.preventYScrollingBeyondElement}
+          className={className + " microlight"}>
+          {value}
+        </pre>
       </div>
     )
   }