diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index ecd1ec6d87..671cac2cb2 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
 import Button from '../button/Button';
@@ -82,6 +83,8 @@ export default {
     },
     timeout: null,
     outsideClickListener: null,
+    resizeListener: null,
+    scrollHandler: null,
     data() {
         return {
             searching: false,
@@ -106,6 +109,12 @@ export default {
     beforeDestroy() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
     },
     methods: {
         onOverlayEnter() {
@@ -113,9 +122,13 @@ export default {
             this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
         },
         alignOverlay() {
             let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
@@ -134,6 +147,38 @@ export default {
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
+                    if (this.overlayVisible) {
+                        this.hideOverlay();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.hideOverlay();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !this.$refs.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
         },
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 7424b7c260..95d6213fc1 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -130,6 +130,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import InputText from '../inputtext/InputText';
 import Button from '../button/Button';
 import DomHandler from '../utils/DomHandler';
@@ -310,6 +311,13 @@ export default {
         }
     },
     navigationState: null,
+    scrollHandler: null,
+    outsideClickListener: null,
+    maskClickListener: null,
+    resizeListener: null,
+    mask: null,
+    timePickerTimer: null,
+    isKeydown: false,
     created() {
         this.updateCurrentMetaData();
     },
@@ -342,6 +350,12 @@ export default {
 
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
     },
     data() {
         return {
@@ -355,11 +369,6 @@ export default {
             overlayVisible: false
         }
     },
-    outsideClickListener: null,
-    maskClickListener: null,
-    mask: null,
-    timePickerTimer: null,
-    isKeydown: false,
     watch: {
         value() {
             this.updateCurrentMetaData();
@@ -537,9 +546,13 @@ export default {
         },
         onOverlayEnterComplete() {
             this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
             if (this.mask) {
                 this.disableModality();
             }
@@ -640,6 +653,38 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) ||
                     this.$el.contains(event.target) || (this.$refs.overlay && this.$refs.overlay.contains(event.target)));
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 407a03a319..761d82091e 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 
 export default {
@@ -70,6 +71,8 @@ export default {
     outsideClickListener: null,
     documentMouseMoveListener: null,
     documentMouseUpListener: null,
+    scrollHandler: null,
+    resizeListener: null,
     hueDragging: null,
     colorDragging: null,
     selfUpdate: null,
@@ -77,6 +80,13 @@ export default {
         this.unbindOutsideClickListener();
         this.unbindDocumentMouseMoveListener();
         this.unbindDocumentMouseUpListener();
+
+        this.unbindResizeListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
     },
     mounted() {
         this.updateUI();
@@ -317,6 +327,8 @@ export default {
             this.updateUI();
             this.alignOverlay();
             this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
 
             if (this.autoZIndex) {
                 this.$refs.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@@ -324,6 +336,8 @@ export default {
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
         },
         alignOverlay() {
             DomHandler.relativePosition(this.$refs.picker, this.$refs.input);
@@ -395,6 +409,38 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         bindDocumentMouseMoveListener() {
             if (!this.documentMouseMoveListener) {
                 this.documentMouseMoveListener = (event) => {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 8f47e0daa3..2f66bc9e5e 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -40,6 +40,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
@@ -83,6 +84,8 @@ export default {
         };
     },
     outsideClickListener: null,
+    scrollHandler: null,
+    resizeListener: null,
     searchTimeout: null,
     currentSearchChar: null,
     previousSearchChar: null,
@@ -90,6 +93,12 @@ export default {
     beforeDestroy() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
     },
     updated() {
         if (this.overlayVisible && this.filterValue) {
@@ -305,6 +314,8 @@ export default {
             this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
 
             if (this.filter) {
                 this.$refs.filterInput.focus();
@@ -314,6 +325,8 @@ export default {
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
             this.$emit('hide');
         },
         alignOverlay() {
@@ -344,6 +357,38 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         search(event) {
             if (!this.visibleOptions) {
                 return;
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index dc1084b018..699c6aad6c 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 import Menuitem from './Menuitem';
 
@@ -52,12 +53,19 @@ export default {
     },
     target: null,
     outsideClickListener: null,
+    scrollHandler: null,
     resizeListener: null,
     relativeAlign: false,
     beforeDestroy() {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+
         this.target = null;
     },
     methods: {
@@ -94,6 +102,7 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindResizeListener();
+            this.bindScrollListener();
 
             if (this.autoZIndex) {
                 this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@@ -102,6 +111,7 @@ export default {
         onLeave() {
             this.unbindOutsideClickListener();
             this.unbindResizeListener();
+            this.unbindScrollListener();
         },
         alignOverlay() {
             if (this.relativeAlign)
@@ -126,6 +136,22 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 0f41d19396..ca63b36956 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -55,6 +55,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
@@ -97,9 +98,17 @@ export default {
         };
     },
     outsideClickListener: null,
+    resizeListener: null,
+    scrollHandler: null,
     beforeDestroy() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
     },
     updated() {
         if (this.overlayVisible && this.filterValue) {
@@ -273,10 +282,14 @@ export default {
             this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
             this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
             this.$emit('hide');
         },
         alignOverlay() {
@@ -304,6 +317,38 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !(this.$refs.container.isSameNode(event.target) || this.$refs.container.contains(event.target) || (this.$refs.overlay && this.$refs.overlay.contains(event.target)));
         },
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 683a8ca0c2..9d720d0a32 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
 
@@ -49,13 +50,18 @@ export default {
     },
     target: null,
     outsideClickListener: null,
+    scrollHandler: null,
     resizeListener: null,
     beforeDestroy() {
         this.restoreAppend();
-        this.unbindResizeListener();
         if (this.dismissable) {
             this.unbindOutsideClickListener();
         }
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+        this.unbindResizeListener();
         this.target = null;
     },
     methods: {
@@ -79,6 +85,7 @@ export default {
                 this.bindOutsideClickListener();
             }
 
+            this.bindScrollListener();
             this.bindResizeListener();
 
             if (this.autoZIndex) {
@@ -87,6 +94,7 @@ export default {
         },
         onLeave() {
             this.unbindOutsideClickListener();
+            this.unbindScrollListener();
             this.unbindResizeListener();
         },
         alignOverlay() {
@@ -112,6 +120,22 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+                    if (this.visible) {
+                        this.visible = false;
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index dc604bc65e..3af673dd0b 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 
 export default {
@@ -42,10 +43,20 @@ export default {
     info: null,
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
+    resizeListener: null,
+    scrollHandler: null,
     mounted() {
         this.mediumCheckRegExp = new RegExp(this.mediumRegex);
         this.strongCheckRegExp = new RegExp(this.strongRegex);
     },
+    beforeDestroy() {
+        this.unbindResizeListener();
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+        this.panel = null;
+    },
     methods: {
         testStrength(str) {
             let level = 0;
@@ -72,6 +83,54 @@ export default {
             this.panel.appendChild(this.meter);
             this.panel.appendChild(this.info);
             document.body.appendChild(this.panel);
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input, () => {
+                    if (this.panel && this.panel.offsetParent) {
+                        this.hide();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.panel && this.panel.offsetParent) {
+                        this.hide();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        hide() {
+            if (this.panel) {
+                DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
+                DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
+
+                setTimeout(() => {
+                    if (this.panel) {
+                        this.panel.style.display = 'none';
+                        DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
+                    }
+                }, 150);
+
+                this.unbindScrollListener();
+                this.unbindResizeListener();
+            }
         }
     },
     computed: {
@@ -94,20 +153,14 @@ export default {
                             DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
                         }, 1);
                         DomHandler.absolutePosition(this.panel, this.$refs.input);
+                        this.bindScrollListener();
+                        this.bindResizeListener();
                     }
 
                     this.$emit('focus', event);
                 },
                 blur: event => {
-                    if (this.panel) {
-                        DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
-                        DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
-
-                        setTimeout(() => {
-                            vm.panel.style.display = 'none';
-                            DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
-                        }, 150);
-                    }
+                    vm.hide();
 
                     this.$emit('blur', event);
                 },
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index 15c46b77d5..04f5098b4a 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 import TieredMenuSub from './TieredMenuSub';
 
@@ -35,6 +36,7 @@ export default {
     },
     target: null,
     outsideClickListener: null,
+    scrollHandler: null,
     resizeListener: null,
     data() {
         return {
@@ -45,6 +47,12 @@ export default {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+
         this.target = null;
     },
     methods: {
@@ -74,6 +82,7 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindResizeListener();
+            this.bindScrollListener();
 
             if (this.autoZIndex) {
                 this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@@ -82,6 +91,7 @@ export default {
         onLeave() {
             this.unbindOutsideClickListener();
             this.unbindResizeListener();
+            this.unbindScrollListener();
         },
         alignOverlay() {
             DomHandler.absolutePosition(this.$refs.container, this.target);
@@ -102,6 +112,22 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+                    if (this.visible) {
+                        this.hide();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
diff --git a/src/components/utils/ConnectedOverlayScrollHandler.js b/src/components/utils/ConnectedOverlayScrollHandler.js
new file mode 100644
index 0000000000..d91b3a70e6
--- /dev/null
+++ b/src/components/utils/ConnectedOverlayScrollHandler.js
@@ -0,0 +1,31 @@
+import DomHandler from './DomHandler';
+
+export default class ConnectedOverlayScrollHandler {
+
+    constructor(element, listener = () => {}) {
+        this.element = element;
+        this.listener = listener;
+    }
+
+    bindScrollListener() {
+        this.scrollableParents = DomHandler.getScrollableParents(this.element);
+        for (let i = 0; i < this.scrollableParents.length; i++) {
+            this.scrollableParents[i].addEventListener('scroll', this.listener);
+        }
+    }
+
+    unbindScrollListener() {
+        if (this.scrollableParents) {
+            for (let i = 0; i < this.scrollableParents.length; i++) {
+                this.scrollableParents[i].removeEventListener('scroll', this.listener);
+            }
+        }
+    }
+
+    destroy() {
+        this.unbindScrollListener();
+        this.element = null;
+        this.listener = null;
+        this.scrollableParents = null;
+    }
+}
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
index 4eaa4b9883..e46f09f89e 100755
--- a/src/components/utils/DomHandler.js
+++ b/src/components/utils/DomHandler.js
@@ -245,6 +245,42 @@ export default class DomHandler {
         element.style.left = left + 'px';
     }
 
+    static getParents(element, parents = []) {
+        return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
+    }
+
+    static getScrollableParents(element) {
+        let scrollableParents = [];
+
+        if (element) {
+            let parents = this.getParents(element);
+            const overflowRegex = /(auto|scroll)/;
+            const overflowCheck = (node) => {
+                let styleDeclaration = window['getComputedStyle'](node, null);
+                return overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY'));
+            };
+
+            for (let parent of parents) {
+                let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
+                if (scrollSelectors) {
+                    let selectors = scrollSelectors.split(',');
+                    for (let selector of selectors) {
+                        let el = this.findSingle(parent, selector);
+                        if (el && overflowCheck(el)) {
+                            scrollableParents.push(el);
+                        }
+                    }
+                }
+
+                if (parent.nodeType === 9 || overflowCheck(parent)) {
+                    scrollableParents.push(parent);
+                }
+            }
+        }
+
+        return scrollableParents;
+    }
+
     static getHiddenElementOuterHeight(element) {
         element.style.visibility = 'hidden';
         element.style.display = 'block';