From 98721b9426269a051048e858fffe10c5b15a0db1 Mon Sep 17 00:00:00 2001 From: Gittenburg Date: Fri, 26 Jun 2020 13:18:24 +0200 Subject: [PATCH] Prevent double scrollbars for flexbox parents Previously attempting to use SimpleBar in a parent with "display: flex" without specifying a height or "overflow: hidden" on the host element, resulted in two scroll bars being displayed SimpleBar and the native one. Fixes #473. --- packages/simplebar/src/simplebar.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/simplebar/src/simplebar.js b/packages/simplebar/src/simplebar.js index 98fdfdad..a5b05fb6 100755 --- a/packages/simplebar/src/simplebar.js +++ b/packages/simplebar/src/simplebar.js @@ -64,6 +64,14 @@ export default class SimpleBar { SimpleBar.getRtlHelpers = memoize(SimpleBar.getRtlHelpers); + const elWindow = getElementWindow(this.el); + const elOverflowY = elWindow.getComputedStyle(this.el).overflowY; + const parentDisplay = elWindow.getComputedStyle(this.el.parentElement).display; + if ((elOverflowY == 'auto' || elOverflowY == 'scroll') + && (parentDisplay == 'flex' || parentDisplay == 'inline-flex')) { + // Prevent bug where Simplebar is shown along with the native scrollbar. + this.el.style.height = '100%'; + } this.init(); }