fix: detect overflow hidden

theKashey · Feb 6, 2019 · aa848e6 · aa848e6
1 parent 107e95f
commit aa848e6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/example/app.tsx b/example/app.tsx
@@ -44,12 +44,12 @@ const Portal = () => (
 
 export default class App extends Component <{}, AppState> {
   state: AppState = {
-    counter: 1
+    counter: 0
   };
 
   componentDidMount() {
     setInterval(() => {
-       this.setState({counter: this.state.counter ? 0 : 1})
+       //this.setState({counter: this.state.counter ? 0 : 1})
     }, 1000);
 
     setTimeout(() => {
@@ -79,7 +79,7 @@ export default class App extends Component <{}, AppState> {
             top: '50px',
             //width: '100%',
             height: '80px',
-            backgroundColor: 'rgba(100,0,0,0.5)'
+            backgroundColor: 'rgba(200,0,0,0.5)'
           }}
           // className={zeroRightClassName}
         >
@@ -98,10 +98,10 @@ export default class App extends Component <{}, AppState> {
               }}
               // className={zeroRightClassName}
             >
-              XXX
-              XXX
-              XXX
-              {fill(20, 1).map(x => <p>{x}****</p>)}
+              YY
+              ZZZ
+              AAAA
+              {fill(20, 1).map(x => <p>{x} --****--</p>)}
               <Portal/>
             </div>
           </RemoveScroll>

diff --git a/src/component.tsx b/src/component.tsx
@@ -67,7 +67,8 @@ export class RemoveScroll extends React.Component<RemoveScrollProps> {
   }
 
   shouldPrevent = (event: any) => {
-    if (RemoveScroll.stack[RemoveScroll.stack.length - 1] !== this) {
+    const stack = RemoveScroll.stack.filter(el => el.props.enabled);
+    if (!stack.length || stack[stack.length - 1] !== this) {
       // not current active
       return;
     }

diff --git a/src/handleScroll.ts b/src/handleScroll.ts
@@ -1,3 +1,7 @@
+const elementCouldBeScrolled = (node: HTMLElement): boolean => (
+  window.getComputedStyle(node).overflowX !== 'hidden'
+);
+
 export const handleScroll = (endTarget: HTMLElement, event: any, sourceDelta: number) => {
   const delta = sourceDelta;
   // find scrollable target
@@ -13,16 +17,21 @@ export const handleScroll = (endTarget: HTMLElement, event: any, sourceDelta: nu
   do {
     const {scrollTop, scrollHeight, clientHeight} = target;
 
-    availableScroll += scrollHeight - clientHeight - scrollTop;
-    availableScrollTop += scrollTop;
+    const elementScroll = scrollHeight - clientHeight - scrollTop;
+    if (scrollTop || elementScroll) {
+      if (elementCouldBeScrolled(target)) {
+        availableScroll += elementScroll;
+        availableScrollTop += scrollTop;
+      }
+    }
 
     target = target.parentNode as any;
   } while (
     // portaled content
-    (!targetInLock && target !== document.body) ||
-    // self content
-    (targetInLock && (endTarget.contains(target) || endTarget===target))
-  );
+  (!targetInLock && target !== document.body) ||
+  // self content
+  (targetInLock && (endTarget.contains(target) || endTarget === target))
+    );
 
   if (isDeltaPositive && delta > availableScroll) {
     shouldCancelScroll = true;