Feature/scroll x ios (#31)

* feat: support scroll-x in demo

* feat: support scroll-x on iOS with lock

Author: evinma

index.html

@@ -37,12 +37,15 @@ <h2>
           dialog one
           <button id="modalBtn">click me to show dialog two</button>
         </h2>
-        <p id="targetOne" class="target"></p>
+        <div id="targetOne" class="target"></div>
       </div>
 
       <div id="modalTwo" class="modal">
-        <h2>dialog two</h2>
-        <p id="targetTwo" class="target"></p>
+        <h2>dialog two with scroll-x</h2>
+        <div id="targetTwo" class="target">
+          <p>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
+          <p>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
+        </div>
       </div>
 
       <div id="list"></div>
@@ -63,7 +66,6 @@ <h2>dialog two</h2>
       }
       $('#list').innerHTML = someText
       $targetOne.innerHTML = someText
-      $targetTwo.innerHTML = someText
 
       $('#btn').onclick = function () {
         $modalOne.style.display = 'block'
@@ -104,8 +106,9 @@ <h2>dialog two</h2>
       header {
         position: fixed;
         top: 0;
-        left: 0;
         right: 0;
+        left: 0;
+
         background: #fff;
       }
       .content {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tua-body-scroll-lock",
-    "version": "0.3.1",
+    "version": "1.0.0",
     "description": "🔐Body scroll locking that just works with everything",
     "main": "dist/tua-bsl.umd.js",
     "module": "dist/tua-bsl.esm.js",

src/index.ts

@@ -10,6 +10,7 @@ type OverflowHiddenMobileStyleType = 'top' | 'width' | 'height' | 'overflow' | '
 
 let lockedNum = 0
 let initialClientY = 0
+let initialClientX = 0
 let unLockCallback: any = null
 let documentListenerAdded = false
 
@@ -67,14 +68,28 @@ const preventDefault = (event: TouchEvent) => {
 }
 
 const handleScroll = (event: TouchEvent, targetElement: HTMLElement) => {
-    const clientY = event.targetTouches[0].clientY - initialClientY
-
     if (targetElement) {
-        const { scrollTop, scrollHeight, clientHeight } = targetElement
+        const {
+            scrollTop,
+            scrollLeft,
+            scrollWidth,
+            scrollHeight,
+            clientWidth,
+            clientHeight,
+        } = targetElement
+        const clientX = event.targetTouches[0].clientX - initialClientX
+        const clientY = event.targetTouches[0].clientY - initialClientY
+        const isVertical = Math.abs(clientY) > Math.abs(clientX)
+
         const isOnTop = clientY > 0 && scrollTop === 0
+        const isOnLeft = clientX > 0 && scrollLeft === 0
+        const isOnRight = clientX < 0 && scrollLeft + clientWidth + 1 >= scrollWidth
         const isOnBottom = clientY < 0 && scrollTop + clientHeight + 1 >= scrollHeight
 
-        if (isOnTop || isOnBottom) {
+        if (
+            (isVertical && (isOnTop || isOnBottom)) ||
+            (!isVertical && (isOnLeft || isOnRight))
+        ) {
             return preventDefault(event)
         }
     }
@@ -104,6 +119,7 @@ const lock = (targetElement?: HTMLElement) => {
         if (targetElement && lockedElements.indexOf(targetElement) === -1) {
             targetElement.ontouchstart = (event) => {
                 initialClientY = event.targetTouches[0].clientY
+                initialClientX = event.targetTouches[0].clientX
             }
 
             targetElement.ontouchmove = (event) => {