Fix scrolling on code block issue

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'underscore';
 import withLocalize from '../../../withLocalize';
 import htmlRendererPropTypes from '../htmlRendererPropTypes';
 import BasePreRenderer from './BasePreRenderer';
@@ -8,6 +9,7 @@ class PreRenderer extends React.Component {
         super(props);
 
         this.scrollNode = this.scrollNode.bind(this);
+        this.debouncedIsScrollingVertically = _.debounce(this.isScrollingVertically.bind(this), 100, true);
     }
 
     componentDidMount() {
@@ -23,17 +25,27 @@ class PreRenderer extends React.Component {
             .removeEventListener('wheel', this.scrollNode);
     }
 
+    /**
+     * Check if user is scrolling vertically based on deltaX and deltaY. We debounce this
+     * method in the constructor to make sure it's called only for the first event.
+     * @param {WheelEvent} event Wheel event
+     * @returns {Boolean} true if user is scrolling vertically
+     */
+    isScrollingVertically(event) {
+        // Mark as vertical scrolling only when absolute value of deltaY is more than the double of absolute
+        // value of deltaX, so user can use trackpad scroll on the code block horizontally at a wide angle.
+        return Math.abs(event.deltaY) > (Math.abs(event.deltaX) * 2);
+    }
+
     /**
      * Manually scrolls the code block if code block horizontal scrollable, then prevents the event from being passed up to the parent.
      * @param {Object} event native event
      */
     scrollNode(event) {
         const node = this.ref.getScrollableNode();
         const horizontalOverflow = node.scrollWidth > node.offsetWidth;
-
-        // Account for vertical scrolling variation when horizontally scrolling via touchpad by checking a large delta.
-        const isVerticalScrolling = Math.abs(event.deltaY) > 3; // This is for touchpads sensitive
-        if ((event.currentTarget === node) && horizontalOverflow && !isVerticalScrolling) {
+        const isScrollingVertically = this.debouncedIsScrollingVertically(event);
+        if ((event.currentTarget === node) && horizontalOverflow && !isScrollingVertically) {
             node.scrollLeft += event.deltaX;
             event.preventDefault();
             event.stopPropagation();