2 files changed, 101 insertions, 0 deletions

diff --git a/addons/web/static/src/js/libs/bootstrap.js b/addons/web/static/src/js/libs/bootstrap.js
index 8f200794fa8..07e04c64a39 100644
--- a/addons/web/static/src/js/libs/bootstrap.js
+++ b/addons/web/static/src/js/libs/bootstrap.js
@@ -82,6 +82,20 @@ $.fn.tooltip.Constructor.prototype.show = function () {
     return bootstrapShowFunction.call(this);
 };
 
+/* Bootstrap scrollspy fix for non-body to spy */
+
+const bootstrapSpyRefreshFunction = $.fn.scrollspy.Constructor.prototype.refresh;
+$.fn.scrollspy.Constructor.prototype.refresh = function () {
+    bootstrapSpyRefreshFunction.apply(this, arguments);
+    if (this._scrollElement === window || this._config.method !== 'offset') {
+        return;
+    }
+    const baseScrollTop = this._getScrollTop();
+    for (let i = 0; i < this._offsets.length; i++) {
+        this._offsets[i] += baseScrollTop;
+    }
+};
+
 return {
     makeExtendedSanitizeWhiteList: makeExtendedSanitizeWhiteList,
 };
diff --git a/addons/web/static/src/js/libs/jquery.js b/addons/web/static/src/js/libs/jquery.js
index 1a33d43c2e5..6921b004019 100644
--- a/addons/web/static/src/js/libs/jquery.js
+++ b/addons/web/static/src/js/libs/jquery.js
@@ -122,5 +122,92 @@ $.fn.extend({
             });
         });
     },
+    /**
+     * @return {jQuery}
+     */
+    closestScrollable() {
+        let $el = this;
+        while ($el[0] !== document.scrollingElement) {
+            if ($el.isScrollable()) {
+                return $el;
+            }
+            $el = $el.parent();
+        }
+        return $el;
+    },
+    /**
+     * @returns {jQuery}
+     */
+    getScrollingElement() {
+        const $baseScrollingElement = $(document.scrollingElement);
+        if ($baseScrollingElement.isScrollable()
+                && $baseScrollingElement.hasScrollableContent()) {
+            return $baseScrollingElement;
+        }
+        const bodyHeight = $(document.body).height();
+        for (const el of document.body.children) {
+            // Search for a body child which is at least as tall as the body
+            // and which has the ability to scroll if enough content in it. If
+            // found, suppose this is the top scrolling element.
+            if (el.scrollHeight < bodyHeight) {
+                continue;
+            }
+            const $el = $(el);
+            if ($el.isScrollable()) {
+                return $el;
+            }
+        }
+        return $baseScrollingElement;
+    },
+    /**
+     * @return {boolean}
+     */
+    hasScrollableContent() {
+        return this[0].scrollHeight > this[0].clientHeight;
+    },
+    /**
+     * @returns {boolean}
+     */
+    isScrollable() {
+        const overflow = this.css('overflow-y');
+        return overflow === 'auto' || overflow === 'scroll'
+            || (overflow === 'visible' && this === document.scrollingElement);
+    },
 });
+
+// jQuery functions monkey-patching
+
+// Some magic to ensure scrolltop and animate on html/body animate the top level
+// scrollable element even if not html or body.
+const originalScrollTop = $.fn.scrollTop;
+$.fn.scrollTop = function (value) {
+    if (value !== undefined && this.filter('html, body').length) {
+        // The caller wants to scroll a set of elements including html and/or
+        // body to a specific point -> do that but make sure to add the real
+        // top level element to that set of elements if any different is found.
+        originalScrollTop.apply(this.not('html, body').add($().getScrollingElement()), arguments);
+        return this;
+    } else if (value === undefined && this.eq(0).is('html, body')) {
+        // The caller wants to get the scroll point of a set of elements, jQuery
+        // will return the scroll point of the first one, if it is html or body
+        // return the scroll point of the real top level element.
+        return originalScrollTop.apply($().getScrollingElement(), arguments);
+    }
+    return originalScrollTop.apply(this, arguments);
+};
+const originalAnimate = $.fn.animate;
+$.fn.animate = function (properties, ...rest) {
+    const props = Object.assign({}, properties);
+    if ('scrollTop' in props && this.filter('html, body').length) {
+        // The caller wants to scroll a set of elements including html and/or
+        // body to a specific point -> do that but make sure to add the real
+        // top level element to that set of elements if any different is found.
+        originalAnimate.call(this.not('html, body').add($().getScrollingElement()), {'scrollTop': props['scrollTop']}, ...rest);
+        delete props['scrollTop'];
+    }
+    if (!Object.keys(props).length) {
+        return this;
+    }
+    return originalAnimate.call(this, props, ...rest);
+};
 });