From c6475c00bcfa49dde37ef9de06ebba82ba5ba15d Mon Sep 17 00:00:00 2001
From: Oyku Yilmaz <12100596+oykuyilmaz@users.noreply.github.com>
Date: Mon, 11 Dec 2023 11:56:30 +0100
Subject: [PATCH] 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
---
 src/autocomplete.js   | 4 +++-
 src/css/editor-css.js | 1 +
 src/lib/scroll.js     | 8 ++++++++
 src/tooltip.js        | 5 +++--
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/scroll.js

diff --git a/src/autocomplete.js b/src/autocomplete.js
index 01d2762c8b7..f6088ef305d 100644
--- a/src/autocomplete.js
+++ b/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 " +
diff --git a/src/css/editor-css.js b/src/css/editor-css.js
index 0106db44e9e..bdcde97a02b 100644
--- a/src/css/editor-css.js
+++ b/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;
diff --git a/src/lib/scroll.js b/src/lib/scroll.js
new file mode 100644
index 00000000000..a0bea537865
--- /dev/null
+++ b/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();
+    }
+};
\ No newline at end of file
diff --git a/src/tooltip.js b/src/tooltip.js
index da6badf4092..fc62ae7a52a 100644
--- a/src/tooltip.js
+++ b/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);
     }
 
     /**