Merge branch 'master' into next

* master:
  Add an scrollMaxSize option (fix #125
  Refactor the way options are retrieved to be more scalable (no more mapping from data attributes)
  Direction option is now handled through options for performances reason (ref #162)
  Fix RTL support not positioning scrollbar properly (fix #153)
  Add a "caveats" section to the README (fix #91)
  2.6.1
  Remove !important rule on props that don't absolutely need it
  Overflow css rules shouldn't be defined as !important so user can opt-out from x/y scroll by overriding these easily
  Add a new option to force track to be visible (same behaviour as overflow: scroll, show track, hide scrollbar) (ref #129)
  Set SimpleBar to inherit from parent's max-height + fix issue in IE11 (fix #154)
  add dist files for 2.6.0
  2.6.0

# Conflicts:
#	dist/simplebar.css
#	dist/simplebar.js

README.md

@@ -39,6 +39,7 @@ Set `data-simplebar` on the element you want your custom scrollbar. You're done.
 ### :warning: Warning!
 SimpleBar is **not intended to be used on the `body` element!** I don't recommend wrapping your entire web page inside a custom scroll as it will often affect badly the user experience (slower scroll performances compare to native body scroll, no native scroll behaviours like click on track, etc.). Do it at your own risk!
 SimpleBar is meant to improve the experience of **internal web pages scroll**: like a chat box or a small scrolling area.
+**Please read the [caveats](#5-caveats) section first to know the limitations!**
 
 ### Troubleshoot
 If you are experiencing issues when setting up SimpleBar it is most likely because your styles are clashing with SimpleBar ones. Make sure the element you are setting SimpleBar on does not override any SimpleBar css properties! We recommend to not style at all that element and use an inner element instead.
@@ -49,8 +50,9 @@ If you are experiencing issues when setting up SimpleBar it is most likely becau
 2. [Browsers support](#2-browsers-support)
 3. [Demo](#3-demo)
 4. [How it works](#4-how-it-works)
-5. [Changelog](#5-changelog)
-6. [Credits](#6-credits)
+5. [Caveats](#5-caveats)
+5. [Changelog](#6-changelog)
+6. [Credits](#7-credits)
 
 ## 1. Documentation
 
@@ -178,11 +180,14 @@ For the most part SimpleBar uses the browser's native scrolling functionality, b
 
 Key to this technique is hiding the native browser scrollbar. The scrollable element is made slightly wider/taller than its containing element, effectively hiding the scrollbar from view.
 
-## 5. Changelog
+## 5. Caveats
+- SimpleBar can't be used on the body, textarea or iframe elements. If you are looking to support textarea, I suggest taking a look at [OverLayScrollbars](https://kingsora.github.io/OverlayScrollbars)
+
+## 6. Changelog
 
 See changelog here : https://github.com/Grsmto/simplebar/releases
 
-## 6. Credits
+## 7. Credits
 
 Most of the credit goes to [Jonathan Nicol](http://www.f6design.com/) who made the original plugin called [Trackpad Scroll Emulator](https://github.com/jnicol/trackpad-scroll-emulator).
 

package.json

@@ -14,7 +14,7 @@
   "module": "dist/simplebar.esm.js",
   "homepage": "https://grsmto.github.io/simplebar/",
   "bugs": "https://github.com/grsmto/simplebar/issues",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

src/simplebar.css

@@ -1,24 +1,26 @@
 [data-simplebar] {
-    position: relative!important;
-    z-index: 0!important;
+    position: relative;
+    z-index: 0;
     overflow: hidden!important;
+    max-height: inherit;
     -webkit-overflow-scrolling: touch; /* Trigger native scrolling for mobile, if not supported, plugin is used. */
 }
 
 [data-simplebar="init"] {
-    display: flex!important;
+    display: flex;
 }
 
 .simplebar-scroll-content {
     overflow-x: hidden!important;
-    overflow-y: scroll!important;
+    overflow-y: scroll;
     min-width: 100%!important;
+    max-height: inherit!important;
     box-sizing: content-box!important;
 }
 
 .simplebar-content {
-    overflow-x: scroll!important;
     overflow-y: hidden!important;
+    overflow-x: scroll;
     box-sizing: border-box!important;
     min-height: 100%!important;
 }
@@ -85,3 +87,13 @@
     min-width: 10px;
     width: auto;
 }
+
+/* Rtl support */
+[data-simplebar-direction="rtl"] .simplebar-track {
+    right: auto;
+    left: 0;
+}
+
+[data-simplebar-direction="rtl"] .simplebar-track.horizontal {
+    right: 0;
+}

src/simplebar.js

@@ -22,8 +22,8 @@ export default class SimpleBar {
         this.mutationObserver;
         this.resizeObserver;
         this.currentAxis;
-        this.isRtl;
         this.options = Object.assign({}, SimpleBar.defaultOptions, options);
+        this.isRtl = this.options.direction === 'rtl';
         this.classNames = this.options.classNames;
         this.scrollbarWidth = scrollbarWidth();
         this.offsetSize = 20;
@@ -44,20 +44,16 @@ export default class SimpleBar {
     static get defaultOptions() {
         return {
             autoHide: true,
+            forceVisible: false,
             classNames: {
                 content: 'simplebar-content',
                 scrollContent: 'simplebar-scroll-content',
                 scrollbar: 'simplebar-scrollbar',
                 track: 'simplebar-track'
             },
-            scrollbarMinSize: 25
-        }
-    }
-
-    static get htmlAttributes() {
-        return {
-            autoHide: 'data-simplebar-auto-hide',
-            scrollbarMinSize: 'data-simplebar-scrollbar-min-size'
+            scrollbarMinSize: 25,
+            scrollbarMaxSize: 0,
+            direction: 'ltr'
         }
     }
 
@@ -112,14 +108,14 @@ export default class SimpleBar {
 
     // Helper function to retrieve options from element attributes
     static getElOptions(el) {
-        const options = Object.keys(SimpleBar.htmlAttributes).reduce((acc, obj) => {
-            const attribute = SimpleBar.htmlAttributes[obj];
-            if (el.hasAttribute(attribute)) {
-                acc[obj] = JSON.parse(el.getAttribute(attribute) || true);
+        const options = Array.from(el.attributes).reduce((acc, attribute) => {
+            const option = attribute.name.match(/data-simplebar-(.+)/);
+            if (option) {
+                const key = option[1].replace(/\W+(.)/g, (x, chr) => chr.toUpperCase());
+                acc[key] = attribute.value ? JSON.parse(attribute.value) : true;
             }
             return acc;
         }, {});
-
         return options;
     }
 
@@ -146,8 +142,6 @@ export default class SimpleBar {
         this.scrollbarX = this.trackX.querySelector(`.${this.classNames.scrollbar}`);
         this.scrollbarY = this.trackY.querySelector(`.${this.classNames.scrollbar}`);
 
-        this.isRtl = getComputedStyle(this.contentEl).direction === 'rtl';
-
         this.scrollContentEl.style[this.isRtl ? 'paddingLeft' : 'paddingRight'] = `${this.scrollbarWidth || this.offsetSize}px`;
         this.scrollContentEl.style.marginBottom = `-${this.scrollbarWidth*2 || this.offsetSize}px`;
         this.contentEl.style.paddingBottom = `${this.scrollbarWidth || this.offsetSize}px`;
@@ -351,14 +345,25 @@ export default class SimpleBar {
         let scrollPourcent  = scrollOffset / (contentSize - scrollbarSize);
         // Calculate new height/position of drag handle.
         let handleSize      = Math.max(~~(scrollbarRatio * scrollbarSize), this.options.scrollbarMinSize);
+
+        if (this.options.scrollbarMaxSize) {
+            handleSize = Math.min(handleSize, this.options.scrollbarMaxSize);
+        }
+
         let handleOffset    = ~~((scrollbarSize - handleSize) * scrollPourcent);
 
         // Set isVisible to false if scrollbar is not necessary (content is shorter than wrapper)
         this.isVisible[axis] = scrollbarSize < contentSize;
 
-        if (this.isVisible[axis]) {
+        if (this.isVisible[axis] || this.options.forceVisible) {
             track.style.visibility = 'visible';
 
+            if (this.options.forceVisible) {
+                scrollbar.style.visibility = 'hidden';
+            } else {
+                scrollbar.style.visibility = 'visible';
+            }
+
             if (axis === 'x') {
                 scrollbar.style.left = `${handleOffset}px`;
                 scrollbar.style.width = `${handleSize}px`;