🐛 Resolve scroll lock issue on ios safari (#509)

* Resolve scroll lock issue on ios safari

* Update tests, add changeset and contributor

---------

Co-authored-by: Julien <juliencaron@protonmail.com>

.all-contributorsrc

@@ -1663,6 +1663,13 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/15759600?v=4",
       "profile": "https://github.com/iuriiiurevich",
       "contributions": ["bug", "code"]
+    },
+    {
+      "login": "jontewks",
+      "name": "Jon Tewksbury",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3970573?v=4",
+      "profile": "http://tewks.io/",
+      "contributions": ["code", "bug"]
     }
   ],
   "contributorsPerLine": 7,

.changeset/plenty-shoes-type.md

@@ -0,0 +1,5 @@
+---
+"usehooks-ts": patch
+---
+
+Resolve scroll lock issue on ios safari (#509 by @jontewks)

.github/CONTRIBUTING.md

@@ -408,6 +408,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ymc-maha"><img src="https://avatars.githubusercontent.com/u/697307?v=4?s=80" width="80px;" alt="Manuel"/><br /><sub><b>Manuel</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=ymc-maha" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aymc-maha" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Yurchishin"><img src="https://avatars.githubusercontent.com/u/36650915?v=4?s=80" width="80px;" alt="Yurii Rybak"/><br /><sub><b>Yurii Rybak</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3AYurchishin" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/iuriiiurevich"><img src="https://avatars.githubusercontent.com/u/15759600?v=4?s=80" width="80px;" alt="Yury Demin"/><br /><sub><b>Yury Demin</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aiuriiiurevich" title="Bug reports">🐛</a> <a href="https://github.com/juliencrn/usehooks-ts/commits?author=iuriiiurevich" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://tewks.io/"><img src="https://avatars.githubusercontent.com/u/3970573?v=4?s=80" width="80px;" alt="Jon Tewksbury"/><br /><sub><b>Jon Tewksbury</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=jontewks" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Ajontewks" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

README.md

@@ -17,7 +17,7 @@
 [![License](https://badgen.net/badge/License/MIT/blue)](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-236-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-237-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -422,6 +422,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ymc-maha"><img src="https://avatars.githubusercontent.com/u/697307?v=4?s=80" width="80px;" alt="Manuel"/><br /><sub><b>Manuel</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=ymc-maha" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aymc-maha" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Yurchishin"><img src="https://avatars.githubusercontent.com/u/36650915?v=4?s=80" width="80px;" alt="Yurii Rybak"/><br /><sub><b>Yurii Rybak</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3AYurchishin" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/iuriiiurevich"><img src="https://avatars.githubusercontent.com/u/15759600?v=4?s=80" width="80px;" alt="Yury Demin"/><br /><sub><b>Yury Demin</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aiuriiiurevich" title="Bug reports">🐛</a> <a href="https://github.com/juliencrn/usehooks-ts/commits?author=iuriiiurevich" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://tewks.io/"><img src="https://avatars.githubusercontent.com/u/3970573?v=4?s=80" width="80px;" alt="Jon Tewksbury"/><br /><sub><b>Jon Tewksbury</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=jontewks" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Ajontewks" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

packages/usehooks-ts/README.md

@@ -17,7 +17,7 @@
 [![License](https://badgen.net/badge/License/MIT/blue)](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-236-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-237-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -422,6 +422,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ymc-maha"><img src="https://avatars.githubusercontent.com/u/697307?v=4?s=80" width="80px;" alt="Manuel"/><br /><sub><b>Manuel</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=ymc-maha" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aymc-maha" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Yurchishin"><img src="https://avatars.githubusercontent.com/u/36650915?v=4?s=80" width="80px;" alt="Yurii Rybak"/><br /><sub><b>Yurii Rybak</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3AYurchishin" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/iuriiiurevich"><img src="https://avatars.githubusercontent.com/u/15759600?v=4?s=80" width="80px;" alt="Yury Demin"/><br /><sub><b>Yury Demin</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aiuriiiurevich" title="Bug reports">🐛</a> <a href="https://github.com/juliencrn/usehooks-ts/commits?author=iuriiiurevich" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://tewks.io/"><img src="https://avatars.githubusercontent.com/u/3970573?v=4?s=80" width="80px;" alt="Jon Tewksbury"/><br /><sub><b>Jon Tewksbury</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=jontewks" title="Code">💻</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Ajontewks" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

packages/usehooks-ts/src/useScrollLock/useScrollLock.demo.tsx

@@ -15,7 +15,7 @@ export function App() {
 
   return (
     <>
-      <div id="scrollable" style={{ maxHeight: '50vh', overflowY: 'scroll' }}>
+      <div id="scrollable" style={{ maxHeight: '50vh', overflow: 'scroll' }}>
         {['red', 'blue', 'green'].map(color => (
           <div key={color} style={{ backgroundColor: color, height: '30vh' }} />
         ))}

packages/usehooks-ts/src/useScrollLock/useScrollLock.test.ts

@@ -10,9 +10,9 @@ describe('useScrollLock()', () => {
   it('should initially lock and unlock body', () => {
     const { unmount } = renderHook(() => useScrollLock())
 
-    expect(document.body.style.overflowY).toBe('hidden')
+    expect(document.body.style.overflow).toBe('hidden')
     unmount()
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
   })
 
   it('should initially lock and unlock the target element', () => {
@@ -22,9 +22,9 @@ describe('useScrollLock()', () => {
 
     const { unmount } = renderHook(() => useScrollLock({ lockTarget: target }))
 
-    expect(target.style.overflowY).toBe('hidden')
+    expect(target.style.overflow).toBe('hidden')
     unmount()
-    expect(target.style.overflowY).toBe('')
+    expect(target.style.overflow).toBe('')
   })
 
   it('should initially lock and unlock the target element by selector', () => {
@@ -37,69 +37,69 @@ describe('useScrollLock()', () => {
       useScrollLock({ lockTarget: '#target' }),
     )
 
-    expect(target.style.overflowY).toBe('hidden')
+    expect(target.style.overflow).toBe('hidden')
     unmount()
-    expect(target.style.overflowY).toBe('')
+    expect(target.style.overflow).toBe('')
   })
 
   it('should not initially lock and unlock', () => {
     const { unmount } = renderHook(() => useScrollLock({ autoLock: false }))
 
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
     unmount()
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
   })
 
   it('should lock and unlock manually', () => {
     const { result } = renderHook(() => useScrollLock({ autoLock: false }))
 
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
     act(() => {
       result.current.lock()
     })
-    expect(document.body.style.overflowY).toBe('hidden')
+    expect(document.body.style.overflow).toBe('hidden')
     act(() => {
       result.current.unlock()
     })
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
   })
 
   it("should keep the original style of the target element when it's unlocked", () => {
     const target = document.createElement('div')
 
-    target.style.overflowY = 'auto'
+    target.style.overflow = 'auto'
     document.body.appendChild(target)
 
     const { result } = renderHook(() => useScrollLock({ lockTarget: target }))
 
-    expect(target.style.overflowY).toBe('hidden')
+    expect(target.style.overflow).toBe('hidden')
     act(() => {
       result.current.unlock()
     })
-    expect(target.style.overflowY).toBe('auto')
+    expect(target.style.overflow).toBe('auto')
   })
 
   it('should unlock on unmount even with initial is locked', () => {
     const { unmount, result } = renderHook(() =>
       useScrollLock({ autoLock: false }),
     )
 
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
     act(() => {
       result.current.lock()
     })
-    expect(document.body.style.overflowY).toBe('hidden')
+    expect(document.body.style.overflow).toBe('hidden')
     unmount()
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
   })
 
   it('should fallback to document.body if the target element is not found', () => {
     const { unmount } = renderHook(() =>
       useScrollLock({ lockTarget: '#non-existing' }),
     )
 
-    expect(document.body.style.overflowY).toBe('hidden')
+    expect(document.body.style.overflow).toBe('hidden')
     unmount()
-    expect(document.body.style.overflowY).toBe('')
+    expect(document.body.style.overflow).toBe('')
   })
 })

packages/usehooks-ts/src/useScrollLock/useScrollLock.ts

@@ -12,7 +12,7 @@ interface UseScrollLockResult {
 }
 
 type OriginalStyle = {
-  overflowY: CSSStyleDeclaration['overflowY']
+  overflow: CSSStyleDeclaration['overflow']
   paddingRight: CSSStyleDeclaration['paddingRight']
 }
 
@@ -56,15 +56,13 @@ export function useScrollLock(
 
   const lock = () => {
     if (target.current) {
-      const { overflowY, paddingRight } = window.getComputedStyle(
-        target.current,
-      )
+      const { overflow, paddingRight } = window.getComputedStyle(target.current)
 
       // Save the original styles
-      originalStyle.current = { overflowY, paddingRight }
+      originalStyle.current = { overflow, paddingRight }
 
       // Lock the scroll
-      target.current.style.overflowY = 'hidden'
+      target.current.style.overflow = 'hidden'
 
       // prevent width reflow
       if (widthReflow) {
@@ -77,7 +75,7 @@ export function useScrollLock(
 
   const unlock = () => {
     if (target.current && originalStyle.current) {
-      target.current.style.overflowY = originalStyle.current.overflowY
+      target.current.style.overflow = originalStyle.current.overflow
       target.current.style.paddingRight = originalStyle.current.paddingRight
     }
   }