fix: support stacked mode

Author: theKashey

.size-limit

@@ -2,6 +2,6 @@
   {
     path: "dist/es2015/index.js",
     ignore: ["react-dom", "tslib"],
-    limit: "1.5 KB"
+    limit: "1.9 KB"
   }
 ]

README.md

@@ -59,10 +59,15 @@ import {RemoveScroll} from 'react-remove-scroll';
 See [react-remove-scroll-bar](https://github.com/theKashey/react-remove-scroll-bar) documentation for details.
 
 ## More than one lock
-This library will silence any scroll(wheel, touch) event outside of whitelisted node. To be able to use more than one lock:
-- disable isolation mode `<RemoveScroll noIsolation />`. Then remove scroll would handle only events, happened inside it.
-To use this mode you have to _cast_ some _shadow_ behind a modal, to redirect all events to your element
-- use [react-scroll-locky](https://github.com/theKashey/react-scroll-locky), or [react-focus-on](https://github.com/theKashey/react-focus-on), but they are lager. 
+When stacked more is active (default) only one (last) component would be active.
+
+# Performance
+To do the job this library setup _non_ passive event listener. Chrome dev tools would complain about it, as a 
+performance no-op.
+
+We have to use synchronous scroll/touch handler, and it may affect scrolling performance.
+
+Consider using `noIsolation` mode, if you have large scrollable areas.
 
 # Size
 1.5kb after compression (excluding tslib).

example/app.tsx

@@ -84,7 +84,7 @@ export default class App extends Component <{}, AppState> {
           // className={zeroRightClassName}
         >
           XXX
-          {(<RemoveScroll enabled={!!(this.state.counter % 2)}>
+          {(<RemoveScroll enabled={1}>
             <div
               style={{
                 position: 'absolute',
@@ -108,6 +108,7 @@ export default class App extends Component <{}, AppState> {
           )}
         </div>
 
+        <RemoveScroll enabled={!!(this.state.counter % 2)}>
         <div
           style={{
             position: 'absolute',
@@ -116,8 +117,8 @@ export default class App extends Component <{}, AppState> {
             right: 0,
             top: '100px',
             //width: '100%',
-            height: '50px',
-            backgroundColor: 'rgba(0,0,0,0.5)'
+            height: '150px',
+            backgroundColor: 'rgba(0,1,0,0.5)'
           }}
           // className={fullWidthClassName}
         >
@@ -126,6 +127,7 @@ export default class App extends Component <{}, AppState> {
           XXX
           {fill(20, 1).map(x => <p>{x}****</p>)}
         </div>
+        </RemoveScroll>
 
         <div
           style={{

src/component.tsx

@@ -25,17 +25,20 @@ export class RemoveScroll extends React.Component<RemoveScrollProps> {
   private ref = React.createRef<HTMLDivElement>();
 
   public static classNames = classNames;
+  public static stack: Array<RemoveScroll> = [];
 
   static defaultProps = {
     enabled: true,
     removeScrollBar: true,
   };
 
   componentDidMount() {
+    RemoveScroll.stack.push(this);
     this.componentDidUpdate({enabled: false})
   }
 
   componentWillUnmount() {
+    RemoveScroll.stack = RemoveScroll.stack.filter(inst => inst !== this);
     this.disable()
   }
 
@@ -64,6 +67,10 @@ export class RemoveScroll extends React.Component<RemoveScrollProps> {
   }
 
   shouldPrevent = (event: any) => {
+    if (RemoveScroll.stack[RemoveScroll.stack.length - 1] !== this) {
+      // not current active
+      return;
+    }
     const delta = event.deltaY || getTouchY(event);
     const sourceEvent = this.shouldPreventQueue.filter(
       (e: any) => e.name === event.type && e.delta === delta && e.target === event.target