From 65373c8ae584c9feaa4d44f2aab13ce015997ef5 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Tue, 30 Mar 2021 20:58:53 +0300
Subject: [PATCH] Check an overflow value and stop on fixed parent

---
 src/components/scrollManager.js | 41 ++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/scrollManager.js b/src/components/scrollManager.js
index 13ff164e7e..b99fe4a13f 100644
--- a/src/components/scrollManager.js
+++ b/src/components/scrollManager.js
@@ -201,6 +201,19 @@ import layoutManager from './layoutManager';
      */
     const documentScroller = new DocumentScroller();
 
+    const scrollerHints = {
+        x: {
+            nameScroll: 'scrollWidth',
+            nameClient: 'clientWidth',
+            nameStyle: 'overflowX'
+        },
+        y: {
+            nameScroll: 'scrollHeight',
+            nameClient: 'clientHeight',
+            nameStyle: 'overflowY'
+        }
+    };
+
     /**
      * Returns parent element that can be scrolled. If no such, returns document scroller.
      *
@@ -210,24 +223,26 @@ import layoutManager from './layoutManager';
      */
     function getScrollableParent(element, vertical) {
         if (element) {
-            let nameScroll = 'scrollWidth';
-            let nameClient = 'clientWidth';
-            let nameClass = 'scrollX';
-
-            if (vertical) {
-                nameScroll = 'scrollHeight';
-                nameClient = 'clientHeight';
-                nameClass = 'scrollY';
-            }
+            const scrollerHint = vertical ? scrollerHints.y : scrollerHints.x;
 
             let parent = element.parentElement;
 
-            while (parent) {
+            while (parent && parent !== document.body) {
                 // Skip 'emby-scroller' and 'emby-tabs' because they scroll by themselves
                 if (!parent.classList.contains('emby-scroller') &&
-                    !parent.classList.contains('emby-tabs') &&
-                    parent[nameScroll] > parent[nameClient] && parent.classList.contains(nameClass)) {
-                    return parent;
+                    !parent.classList.contains('emby-tabs')) {
+                    const styles = window.getComputedStyle(parent);
+
+                    // Stop on fixed parent
+                    if (styles.position === 'fixed') {
+                        return parent;
+                    }
+
+                    const overflow = styles[scrollerHint.nameStyle];
+
+                    if (overflow === 'scroll' || overflow === 'auto' && parent[scrollerHint.nameScroll] > parent[scrollerHint.nameClient]) {
+                        return parent;
+                    }
                 }
 
                 parent = parent.parentElement;