diff --git a/.size-limit b/.size-limit index c667bad..3bbaea3 100644 --- a/.size-limit +++ b/.size-limit @@ -2,6 +2,6 @@ { path: "dist/es2015/index.js", ignore: ["react-dom", "tslib"], - limit: "1.5 KB" + limit: "1.9 KB" } ] diff --git a/README.md b/README.md index 8799a83..8e21ff5 100644 --- a/README.md +++ b/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 ``. 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). diff --git a/example/app.tsx b/example/app.tsx index f5d6515..264c677 100644 --- a/example/app.tsx +++ b/example/app.tsx @@ -84,7 +84,7 @@ export default class App extends Component <{}, AppState> { // className={zeroRightClassName} > XXX - {( + {(
{ )}
+
{ 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 =>

{x}****

)}
+
{ private ref = React.createRef(); public static classNames = classNames; + public static stack: Array = []; static defaultProps = { enabled: true, @@ -32,10 +33,12 @@ export class RemoveScroll extends React.Component { }; 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 { } 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