diff --git a/README.md b/README.md
index 3aec550..1572814 100644
--- a/README.md
+++ b/README.md
@@ -23,15 +23,24 @@ Works on any browser and any platform. Roughly `5kb`, excluding babel-runtime an
  - `[onClickOutside]` - on click outside of "focus" area. (actually on any event "outside")
  - `[onEscapeKey]` - on Esc key pressed (and not defaultPrevented)
  - `[gapMode]` - the way removed ScrollBar would be _compensated_ - margin(default), or padding. See [scroll-locky documentation](https://github.com/theKashey/react-scroll-locky#gap-modes) to find the one you need.
+ - `[noIsolation]` - disables pointer event isolation
+ - `[shards]` - a list of Refs to be considered as a part of locks.
  
 ## Additional API
 ### Exposed from React-Focus-Lock
  - `AutoFocusInside` - to mark autofocusable element
  - `MoveFocusInside` - to move focus inside or a component mount
+ - `InFocusGuard` - to "guard" shard node.
  
-### Exposed from React-Scroll-Locky
- - `FocusPane` - to create a container with proper dimensions (it's more about right coordinate) set.  
-     
+See [react-focus-lock](https://github.com/theKashey/react-focus-lock) for details.
+ 
+### Exposed from React-Remove-Scroll
+ - `classNames.fullWidth` - "100%" width (will not change on scrollbar removal)
+ - `classNames.zeroRight` - "0" right (will not change on scrollbar removal)
+  
+See [React-Remove-Scroll](https://github.com/theKashey/react-remove-scroll) for details.
+
+> PS: Version 1 used React-scroll-locky which was replaced by remove-scroll.  
   
 # Licence
  MIT
diff --git a/example/app.tsx b/example/app.tsx
index 5558b3f..bfeacc0 100644
--- a/example/app.tsx
+++ b/example/app.tsx
@@ -1,53 +1,95 @@
 import * as React from 'react';
 import {Component} from 'react';
 import {GHCorner} from 'react-gh-corner';
+import {Toggle} from 'react-powerplug';
 import {AppWrapper} from './styled';
-import {FocusOn, FocusPane, AutoFocusInside, MoveFocusInside} from "../src";
+import {FocusOn, AutoFocusInside, MoveFocusInside, InFocusGuard, classNames} from "../src";
 
 export interface AppState {
   enabled: boolean;
 }
 
+const FocusPane = ({children}) => <div className={classNames.fullWidth}>{children}</div>;
+
+const ScrollBox = React.forwardRef(({children}, ref: any) => (
+  <div ref={ref} style={{overflow: 'scroll', height: '200px', width: '300px', backgroundColor: 'rgba(0,0,0,0.3)'}}>
+    <button>{children}</button>
+    <ul>
+      {Array(100).fill(1).map((_, index) => <li>{index}</li>)}
+    </ul>
+    <InFocusGuard>
+      <button>{children}</button>
+    </InFocusGuard>
+  </div>
+));
+
 const repoUrl = 'https://github.com/zzarcon/';
 export default class App extends Component <{}, AppState> {
   state: AppState = {
     enabled: false
   };
 
+  toggleRef = React.createRef<any>();
+  scrollRef = React.createRef<any>()
+
   toggle = () => this.setState({enabled: !this.state.enabled});
 
   render() {
     return (
-      <AppWrapper>
-        <FocusPane>
-          <GHCorner openInNewTab href={repoUrl}/>
-          <button>outside</button>
-          outside
-          <FocusOn
-            enabled={this.state.enabled}
-           // onClickOutside={this.toggle}
-            onEscapeKey={this.toggle}
-          >
-            inside
-            <button>inside</button>
-
-            <button onClick={this.toggle}>{this.state.enabled ? 'disable' : 'enable'}</button>
-            <MoveFocusInside key={`k-${this.state.enabled}`}>
-              <button>inside</button>
-            </MoveFocusInside>
-            <button>inside</button>
-          </FocusOn>
-          <button>outside</button>
-          Example!
-          {
-            Array(100).fill(1).map((_, x) =>
-              <div key={`k${x}`}>
-                {Array(100).fill(1).map((_, x) => <span key={`k${x}`}> *{x}</span>)}
-              </div>
-            )
-          }
-        </FocusPane>
-      </AppWrapper>
+      <Toggle>
+        {({on, toggle}) => (
+          <AppWrapper>
+            <FocusPane>
+              <GHCorner openInNewTab href={repoUrl}/>
+              <button>outside</button>
+              outside
+
+              <button onClick={toggle} ref={this.toggleRef}>toggle drop</button>
+              <button onClick={toggle}>toggle drop 2</button>
+              {on && <div style={{backgroundColor: '#EEE'}}>
+                <FocusOn
+                  scrollLock={true}
+                  onClickOutside={toggle}
+                  onEscapeKey={toggle}
+                  shards={[this.toggleRef, this.scrollRef]}
+                >
+                  Holala!!
+                  <button onClick={toggle}>close</button>
+                  <ScrollBox>innerbox</ScrollBox>
+                </FocusOn>
+              </div>}
+
+
+              <ScrollBox ref={this.scrollRef}>outer box</ScrollBox>
+
+
+              <FocusOn
+                enabled={this.state.enabled}
+                // onClickOutside={this.toggle}
+                onEscapeKey={this.toggle}
+              >
+                inside
+                <button>inside</button>
+
+                <button onClick={this.toggle}>{this.state.enabled ? 'disable' : 'enable'}</button>
+                <MoveFocusInside key={`k-${this.state.enabled}`}>
+                  <button>inside</button>
+                </MoveFocusInside>
+                <button>inside</button>
+              </FocusOn>
+              <button>outside</button>
+              Example!
+              {
+                Array(100).fill(1).map((_, x) =>
+                  <div key={`k${x}`}>
+                    {Array(10).fill(1).map((_, x) => <span key={`k${x}`}> *{x}</span>)}
+                  </div>
+                )
+              }
+            </FocusPane>
+          </AppWrapper>
+        )}
+      </Toggle>
     )
   }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 473bc9d..b298d62 100644
--- a/package.json
+++ b/package.json
@@ -19,13 +19,14 @@
   "author": "Anton Korzunov <thekashey@gmail.com>",
   "license": "MIT",
   "devDependencies": {
+    "react-powerplug": "^1.0.0",
     "size-limit": "^0.21.1",
     "ts-react-toolbox": "^0.1.22"
   },
   "dependencies": {
-    "aria-hidden": "^1.0.0",
-    "react-focus-lock": "^1.17.6",
-    "react-scroll-locky": "^1.4.0"
+    "aria-hidden": "^1.1.1",
+    "react-focus-lock": "^1.18.2",
+    "react-remove-scroll": "^1.0.5"
   },
   "engines": {
     "node": ">=8.5.0"
diff --git a/src/InteractivityDisabler.tsx b/src/InteractivityDisabler.tsx
index e69de29..afa525f 100644
--- a/src/InteractivityDisabler.tsx
+++ b/src/InteractivityDisabler.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {styleSinglentone} from 'react-style-singleton';
+
+const Style = styleSinglentone();
+
+export const focusHiddenMarker = 'data-focus-on-hidden';
+
+const styles = `
+ [${focusHiddenMarker}] {
+   pointer-events: none !important;
+ }
+`;
+
+export const InteractivityDisabler: React.SFC = () => (
+  <Style styles={styles}/>
+)
\ No newline at end of file
diff --git a/src/component.tsx b/src/component.tsx
index ea2b4d1..e561c80 100644
--- a/src/component.tsx
+++ b/src/component.tsx
@@ -1,74 +1,112 @@
 import * as React from 'react';
 import {Component} from 'react';
-import {ScrollLocky} from 'react-scroll-locky';
+import {RemoveScroll} from 'react-remove-scroll';
 import ReactFocusLock from 'react-focus-lock'
 import {hideOthers} from 'aria-hidden';
-
-type GapMode = 'padding' | 'margin';
+import {focusHiddenMarker, InteractivityDisabler} from "./InteractivityDisabler";
 
 export interface ReactFocusOnProps {
   enabled?: boolean;
+  scrollLock?: boolean;
+  focusLock?: boolean;
+
   autoFocus?: boolean;
   onActivation?: (node: HTMLElement) => void;
   onDeactivation?: () => void;
 
-  gapMode?: GapMode;
-
   onClickOutside?: () => void;
   onEscapeKey?: (event: Event) => void;
+
+  noIsolation?: boolean;
+
+  shards?: Array<React.RefObject<any> | HTMLElement>;
 }
 
+const extractRef = (ref: React.RefObject<any> | HTMLElement): HTMLElement => (
+  ('current' in ref) ? ref.current : ref
+);
+
 export class ReactFocusOn extends Component<ReactFocusOnProps> {
   private _undo?: () => void;
 
-  onActivation = (node: HTMLElement) => {
-    this._undo = hideOthers(node);
+  private lockProps = {
+    onClick: (e: React.MouseEvent) => e.preventDefault(),
+  };
+
+  private onActivation = (node: HTMLElement) => {
+    this._undo = hideOthers(
+      [node, ...(this.props.shards || []).map(extractRef)],
+      document.body,
+      this.props.noIsolation ? undefined : focusHiddenMarker
+    );
     const {onActivation} = this.props;
     if (onActivation) {
       onActivation(node);
     }
-    node.addEventListener('keyup', this.onKeyPress);
-    document.body.addEventListener('keyup', this.onKeyPress);
+    document.addEventListener('keyup', this.onKeyPress);
+    document.addEventListener('click', this.onClick);
   };
 
-  onDeactivation = (node: HTMLElement) => {
+  private onDeactivation = (node: HTMLElement) => {
     this._undo!();
     const {onDeactivation} = this.props;
     if (onDeactivation) {
       onDeactivation();
     }
-    node.removeEventListener('keyup', this.onKeyPress);
-    document.body.removeEventListener('keyup', this.onKeyPress);
+    document.removeEventListener('keyup', this.onKeyPress);
+    document.removeEventListener('click', this.onClick);
   };
 
-  onKeyPress = (event: KeyboardEvent) => {
+  private onKeyPress = (event: KeyboardEvent) => {
     if (event.defaultPrevented) {
       return;
     }
     const code = event.key || event.keyCode;
-    if ((event.code === 'Escape' || code === 27) && this.props.onEscapeKey) {
+    if ((event.code === 'Escape' || code === 'Escape' || code === 27) && this.props.onEscapeKey) {
       this.props.onEscapeKey(event);
     }
   };
 
+  private onClick = (event: MouseEvent) => {
+    const {shards = [], onClickOutside} = this.props;
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (
+      shards
+        .map(extractRef)
+        .some(node => node && node.contains(event.target as any) || node === event.target)
+    ) {
+      return;
+    }
+    if (onClickOutside) {
+      onClickOutside();
+    }
+  };
+
   render() {
-    const {children, autoFocus, gapMode, onClickOutside, enabled = true} = this.props;
+    const {children, autoFocus, shards, enabled = true, scrollLock = true, focusLock = true} = this.props;
     return (
-      <ScrollLocky
-        enabled={enabled}
-        onEscape={onClickOutside}
-        gapMode={gapMode}
-      >
-        <ReactFocusLock
-          returnFocus
-          autoFocus={autoFocus}
-          onActivation={this.onActivation}
-          onDeactivation={this.onDeactivation}
-          disabled={!enabled}
+      <>
+        <RemoveScroll
+          enabled={enabled && scrollLock}
+          shards={shards}
         >
-          {children}
-        </ReactFocusLock>
-      </ScrollLocky>
+          <InteractivityDisabler/>
+          <ReactFocusLock
+            returnFocus
+            autoFocus={autoFocus}
+            onActivation={this.onActivation}
+            onDeactivation={this.onDeactivation}
+            disabled={!(enabled && focusLock)}
+            shards={shards}
+
+            lockProps={this.lockProps}
+          >
+            {children}
+          </ReactFocusLock>
+        </RemoveScroll>
+      </>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/src/index.ts b/src/index.ts
index fd459ea..27d951e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,8 @@
+import {RemoveScroll} from 'react-remove-scroll';
+
 export {ReactFocusOn as FocusOn} from './component';
-export {ScrollLockyPane as FocusPane} from 'react-scroll-locky';
-export {AutoFocusInside, MoveFocusInside} from 'react-focus-lock';
\ No newline at end of file
+export {AutoFocusInside, MoveFocusInside, InFocusGuard} from 'react-focus-lock';
+
+export const classNames = {
+  ...RemoveScroll.classNames,
+};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index eb19464..8a0b972 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,7 +18,7 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.5":
+"@babel/runtime@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
   integrity sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==
@@ -687,10 +687,12 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-hidden@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.0.0.tgz#cdaa340a5b59cf418d345b802e08f0bbb65472d1"
-  integrity sha512-ymrp2YffmX+JYZpMONvl15nwlDoCHh9JCyxLFZrY76WAzMFcHC/NKatgdY1yMUhC0rwMtJDEXoyUrDQsTPULhA==
+aria-hidden@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.1.tgz#0c356026d3f65e2bd487a3adb73f0c586be2c37e"
+  integrity sha512-M7zYxCcOQPOaxGHoMTKUFD2UNcVFTp9ycrdStLcTPLf8zgTXC3+YcGe+UuzSh5X1BX/0/PtS8xTNy4xyH/6xtw==
+  dependencies:
+    tslib "^1.0.0"
 
 aria-query@^3.0.0:
   version "3.0.0"
@@ -4123,10 +4125,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-focus-lock@^0.5.2:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.5.3.tgz#bf415da0dfa5f938674485eef36a1958250ce7d2"
-  integrity sha512-WtA68g+R1eiJ3X55DuicccBSar0FM5eXqdZaemL4wtf6OxrNH9yrrQRUWG+cuvV039gNQJVnIKtMeC470MURqw==
+focus-lock@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.1.tgz#904d8d4d3a309e108d57b3a0f417c31b7f16bf24"
+  integrity sha512-q8DoDxBAjeMbrR61CJEvbpLZXgBhF9sNQOSiPigw0QFlZxQGDmGt0maayFkSZhOIFo4chq8kyxrFc4kNhLBfWw==
 
 follow-redirects@^1.0.0:
   version "1.5.9"
@@ -8011,7 +8013,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@15.6.2, prop-types@^15.5.4, prop-types@^15.6.2:
+prop-types@^15.5.4, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -8228,13 +8230,13 @@ react-dom@^16.2.0:
     prop-types "^15.6.2"
     schedule "^0.5.0"
 
-react-focus-lock@^1.17.6:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.17.6.tgz#dd87cff63bedc755a846fb3d16f57ee7449ac7ad"
-  integrity sha512-fSmSpiY2vmiaC+UMGpt0oFwtvStQ3gSaTeDXtQLiN1UmkWGUsEB+AX0KypYGP3uW+OnW8XapTGzRKgQZLksztA==
+react-focus-lock@^1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.18.2.tgz#1d8d3c0e352e99e26104932483087f2e0fc91f2c"
+  integrity sha512-YUZZ7M7iURY7IP/6qbrjhEsHKYqUZukXBaSeRXSHblnPKqNxAstNzrfeOVxXhoWCen7Mqx23mXWGZgVjNbivpA==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    focus-lock "^0.5.2"
+    focus-lock "^0.6.0"
     prop-types "^15.6.2"
     react-clientside-effect "^1.2.0"
 
@@ -8248,27 +8250,32 @@ react-is@^16.3.1, react-is@^16.5.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
   integrity sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ==
 
-react-locky@^1.5.2:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/react-locky/-/react-locky-1.5.3.tgz#1cd9c38c1903fb9175f4ed018449eaa032a721e6"
-  integrity sha512-tg25JqgQu/bmT8YBUJUSd3/khoAoeC+RzS6umTXcXDKEo+x+JwBQRdjG/cg22gfs4DrKCQGkwLPX2kYvIk9EhQ==
+react-powerplug@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-powerplug/-/react-powerplug-1.0.0.tgz#f9c10a761ece115661b8fd10920c4e573ea95909"
+  integrity sha512-H7U+1sNiOqlaPgZpfciVZ3BMHtXHsd0tkXrOmrwV7ZTpK+YGRddK7+Um1RT2OTe+4G+1muXfyFMAwcnasABMtA==
   dependencies:
-    "@babel/runtime" "^7.1.5"
-    prop-types "15.6.2"
+    "@babel/runtime" "^7.0.0"
 
-react-scroll-locky@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-scroll-locky/-/react-scroll-locky-1.4.0.tgz#99b03cd25298013cf8b5ac92a37a09f922fda897"
-  integrity sha512-WyE0lA0kIBiYBxnx7rvmwiiGB1SveT8fK8qowNWeVGm1zT72Nnwa1VXSQNtAhYHqZ8DcxpxhyitLs5aFRbZSPw==
+react-remove-scroll-bar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-1.1.3.tgz#21eb49a0cc9628746d2b624880fb272a3541866a"
+  integrity sha512-mEPbImnGIxv+PyVTpeuGhWVl2aAQgSpB2yX4lL6ttsjT/XVVZwyPiz4gnCxBPoWYniQBLTL1IjZ/rrQLT9ZIJg==
   dependencies:
-    react-locky "^1.5.2"
     react-style-singleton "^1.1.0"
+
+react-remove-scroll@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-1.0.5.tgz#d34d2c799a079ab19a0a2625dd2165e46824ee29"
+  integrity sha512-FXFyYZCU5zxcYf+CVx+4MTRmOXkCcOFgF636GhO/aTIi2wZConpdI327mc1Iozzfq2l7Nh04m2a9lOu7BtjQiQ==
+  dependencies:
+    react-remove-scroll-bar "^1.1.3"
     tslib "^1.0.0"
 
 react-style-singleton@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-1.1.0.tgz#ca2a40cc5bb3c513900141af34019cb80b7c656c"
-  integrity sha512-wYboNTnY74iFYo3uTZzEzdbnpka7Q3mhKiY4q5nwJaiQQig7snn6S6VCgBBVCu1B8LaHslwTLOWCMOLEwjNGXQ==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-1.1.1.tgz#b2b698765519da812b80f55ab3c5fc5d849a2e63"
+  integrity sha512-0JD+XC5veR3oxf7GzIXipr89sM8R3rWnOR/gpzIV0DnoRBrcTvvkqyMu9icDYqM/6CWJhYcH5Jdy6Nim7PmoTQ==
   dependencies:
     invariant "^2.2.4"
     tslib "^1.0.0"