fix: overflowX was used for Y axis

theKashey · Apr 15, 2019 · a4b2f33 · a4b2f33
1 parent 0feea34
commit a4b2f33
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 82 deletions.
diff --git a/example/app.tsx b/example/app.tsx
@@ -83,102 +83,117 @@ export default class App extends Component <{}, AppState> {
           }}
           // className={zeroRightClassName}
         >
-          XXX
-          {(<RemoveScroll enabled={1}>
+          SCROLL!!!
+          {(<RemoveScroll enabled={true}>
+              <div
+                style={{
+                  //position: 'absolute',
+                  overflow: 'scroll',
+                  left: 0,
+                  right: 0,
+                  top: '20px',
+                  width: '300px',
+                  height: '200px',
+                  color: '#FFF',
+                  backgroundColor: 'rgba(0,0,0,0.5)'
+                }}
+                // className={zeroRightClassName}
+              >
+                YY
+                ZZZ
+                AAAA
+                {fill(10, 1).map(x => <p>{x} --****--</p>)}
+                AAAA
+                ZZZ
+                YY
+                <Portal/>
+              </div>
+            </RemoveScroll>
+          )}
+          SCROLL
+          <p>SCROLL</p>
+          <p>SCROLL</p>
+        </div>
+
+        {false && (
+          <RemoveScroll enabled={false && !!(this.state.counter % 2)}>
             <div
               style={{
                 position: 'absolute',
                 overflow: 'scroll',
                 left: 0,
                 right: 0,
-                top: '20px',
+                top: '100px',
                 //width: '100%',
-                height: '100px',
-                backgroundColor: 'rgba(100,0,0,0.5)'
+                height: '150px',
+                backgroundColor: 'rgba(0,1,0,0.5)'
               }}
-              // className={zeroRightClassName}
+              // className={fullWidthClassName}
             >
-              YY
-              ZZZ
-              AAAA
-              {fill(20, 1).map(x => <p>{x} --****--</p>)}
-              <Portal/>
+              XXX
+              XXX
+              XXX
+              {fill(20, 1).map(x => <p>{x}****</p>)}
             </div>
           </RemoveScroll>
-          )}
-        </div>
-
-        <RemoveScroll enabled={!!(this.state.counter % 2)}>
-        <div
-          style={{
-            position: 'absolute',
-            overflow: 'scroll',
-            left: 0,
-            right: 0,
-            top: '100px',
-            //width: '100%',
-            height: '150px',
-            backgroundColor: 'rgba(0,1,0,0.5)'
-          }}
-          // className={fullWidthClassName}
-        >
-          XXX
-          XXX
-          XXX
-          {fill(20, 1).map(x => <p>{x}****</p>)}
-        </div>
-        </RemoveScroll>
+        )}
 
-        <div
-          style={{
-            position: 'fixed',
-            overflow: 'scroll',
-            left: 0,
-            right: 0,
-            top: '150px',
-            //width: '100%',
-            height: '50px',
-            backgroundColor: 'rgba(0,0,0,0.5)'
-          }}
-          className={RemoveScroll.classNames.fullWidth}
-        >
-          XXX
-          XXX
-          XXX
-          {fill(20, 1).map(x => <p>{x}****</p>)}
-        </div>
+        {false && (
+          <>
+            <div
+              style={{
+                position: 'fixed',
+                overflow: 'scroll',
+                left: 0,
+                right: 0,
+                top: '150px',
+                //width: '100%',
+                height: '50px',
+                backgroundColor: 'rgba(0,0,0,0.5)'
+              }}
+              className={RemoveScroll.classNames.fullWidth}
+            >
+              XXX
+              XXX
+              XXX
+              {fill(20, 1).map(x => <p>{x}****</p>)}
+            </div>
 
 
-        <div style={{
-          position: 'absolute',
-          overflow: 'scroll',
-          left: 0,
-          right: 0,
-          top: 200,
-          //width: '100%',
-          height: 300,
-          backgroundColor: 'rgba(0,0,0,0.5)'
-        }}>
-          XXX
-          XXX
-          XXX
-
-          <div style={{
-            position: 'absolute',
-            overflow: 'scroll',
-            width: 200,
-            height: 200,
-            backgroundColor: 'rgba(0,0,0,0.5)'
-          }}>
-            ZZZ
-            ZZZ
-            {fill(20, 1).map(x => <p>{x}****</p>)}
-          </div>
-
-          {fill(20, 1).map(x => <p>{x}****</p>)}
-        </div>
+            <div style={{
+              position: 'absolute',
+              overflow: 'scroll',
+              left: 0,
+              right: 0,
+              top: 200,
+              //width: '100%',
+              height: 300,
+              backgroundColor: 'rgba(0,0,0,0.5)'
+            }}>
+              XXX
+              XXX
+              XXX
+
+              <div style={{
+                position: 'absolute',
+                overflow: 'scroll',
+                width: 200,
+                height: 200,
+                backgroundColor: 'rgba(0,0,0,0.5)'
+              }}>
+                ZZZ
+                ZZZ
+                {fill(20, 1).map(x => <p>{x}****</p>)}
+              </div>
+
+              {fill(20, 1).map(x => <p>{x}****</p>)}
+            </div>
+          </>
+        )}
 
-        {fill(20, 1).map((x, index) => <span>{index}**** </span>)}
+        <p>FILL</p>
+        {fill(100, 1).map((x, index) => <p>{index}**** </p>)}
+        <p>END</p>
       </AppWrapper>
     )
   }

diff --git a/src/handleScroll.ts b/src/handleScroll.ts
@@ -1,5 +1,5 @@
 const elementCouldBeScrolled = (node: HTMLElement): boolean => (
-  window.getComputedStyle(node).overflowX !== 'hidden'
+  window.getComputedStyle(node).overflowY !== 'hidden'
 );
 
 export const handleScroll = (endTarget: HTMLElement, event: any, sourceDelta: number) => {