fix: support stacked mode

.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