fix: prevent browser scroll while scrolling over the tooltip (#5414)

* fix: prevent browser scroll while scrolling over the tooltip

* fix: lint

* fix page scroll if tooltip scroll reaches to end

* move logic to preventParentScroll util function

Author: oykuyilmaz

src/autocomplete.js

@@ -14,6 +14,7 @@ var dom = require("./lib/dom");
 var snippetManager = require("./snippets").snippetManager;
 var config = require("./config");
 var event = require("./lib/event");
+var preventParentScroll = require("./lib/scroll").preventParentScroll;
 
 /**
  * @typedef BaseCompletion
@@ -622,13 +623,14 @@ class Autocomplete {
             this.tooltipNode = dom.createElement("div");
             this.tooltipNode.style.margin = "0";
             this.tooltipNode.style.pointerEvents = "auto";
+            this.tooltipNode.style.overscrollBehavior = "contain";
             this.tooltipNode.tabIndex = -1;
             this.tooltipNode.onblur = this.blurListener.bind(this);
             this.tooltipNode.onclick = this.onTooltipClick.bind(this);
             this.tooltipNode.id = "doc-tooltip";
             this.tooltipNode.setAttribute("role", "tooltip");
             // prevent editor scroll if tooltip is inside an editor
-            this.tooltipNode.addEventListener("wheel", event.stopPropagation);
+            this.tooltipNode.addEventListener("wheel", preventParentScroll);
         }
         var theme = this.editor.renderer.theme;
         this.tooltipNode.className = "ace_tooltip ace_doc-tooltip " +

src/css/editor-css.js

@@ -457,6 +457,7 @@ module.exports = `
     pointer-events: none;
     overflow: auto;
     max-width: min(60em, 66vw);
+    overscroll-behavior: contain;
 }
 .ace_tooltip pre {
     white-space: pre-wrap;

src/lib/scroll.js

@@ -0,0 +1,8 @@
+exports.preventParentScroll = function preventParentScroll(event) {
+    event.stopPropagation();
+    var target = event.currentTarget;
+    var contentOverflows = target.scrollHeight > target.clientHeight;
+    if (!contentOverflows) {
+        event.preventDefault();
+    }
+};

src/tooltip.js

@@ -8,6 +8,7 @@
 var dom = require("./lib/dom");
 var event = require("./lib/event");
 var Range = require("./range").Range;
+var preventParentScroll = require("./lib/scroll").preventParentScroll;
 
 var CLASSNAME = "ace_tooltip";
 
@@ -211,8 +212,8 @@ class HoverTooltip extends Tooltip {
         el.addEventListener("blur", function() {
             if (!el.contains(document.activeElement)) this.hide();
         }.bind(this));
-        
-        el.addEventListener("wheel", event.stopPropagation);
+
+        el.addEventListener("wheel", preventParentScroll);
     }
 
     /**