Fix gesture scroll, again

Author: Ives van Hoorne

packages/app/src/app/components/Preview/DevTools/index.js

@@ -115,12 +115,25 @@ export default class DevTools extends React.PureComponent<Props, State> {
     }
   }
 
+  /**
+   * This stops the propagation of the mousewheel event so the editor itself cannot
+   * block it to prevent gesture scrolls. Without this scrolling won't work in the
+   * console.
+   */
+  mouseWheelHandler = (e: WheelEvent) => {
+    e.stopPropagation();
+  };
+
   componentDidMount() {
     document.addEventListener('mouseup', this.handleMouseUp, false);
     document.addEventListener('mousemove', this.handleMouseMove, false);
     document.addEventListener('touchend', this.handleTouchEnd, false);
     document.addEventListener('touchmove', this.handleTouchMove, false);
 
+    if (this.node) {
+      this.node.addEventListener('mousewheel', this.mouseWheelHandler);
+    }
+
     if (this.props.shouldExpandDevTools) {
       this.openDevTools();
     }
@@ -133,6 +146,10 @@ export default class DevTools extends React.PureComponent<Props, State> {
     document.removeEventListener('mousemove', this.handleMouseMove, false);
     document.removeEventListener('touchend', this.handleTouchEnd, false);
     document.removeEventListener('touchmove', this.handleTouchMove, false);
+
+    if (this.node) {
+      this.node.removeEventListener('mousewheel', this.mouseWheelHandler);
+    }
   }
 
   setHidden = (hidden: boolean) => {

packages/app/src/app/pages/Sandbox/Editor/Content/prevent-gesture-scroll.js

@@ -1,11 +1,14 @@
 function preventScroll(event) {
   // We don't want to scroll below zero or above the width and height
   const maxX = this.scrollWidth - this.offsetWidth;
+  const maxY = this.scrollHeight - this.offsetHeight;
 
   // If this event looks like it will scroll beyond the bounds of the element, prevent it and set the scroll to the boundary manually
   if (
     this.scrollLeft + event.deltaX < 0 ||
-    this.scrollLeft + event.deltaX > maxX
+    this.scrollLeft + event.deltaX > maxX ||
+    this.scrollTop + event.deltaY < 0 ||
+    this.scrollTop + event.deltaY > maxY
   ) {
     event.preventDefault();
 
@@ -14,6 +17,7 @@ function preventScroll(event) {
       0,
       Math.min(maxX, this.scrollLeft + event.deltaX)
     );
+    this.scrollTop = Math.max(0, Math.min(maxY, this.scrollTop + event.deltaY));
   }
 }