diff --git a/.all-contributorsrc b/.all-contributorsrc index 919d6538..093c0859 100644 --- a/.all-contributorsrc +++ b/.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, diff --git a/.changeset/plenty-shoes-type.md b/.changeset/plenty-shoes-type.md new file mode 100644 index 00000000..009fea13 --- /dev/null +++ b/.changeset/plenty-shoes-type.md @@ -0,0 +1,5 @@ +--- +"usehooks-ts": patch +--- + +Resolve scroll lock issue on ios safari (#509 by @jontewks) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 77051b68..afe3660a 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -408,6 +408,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co Manuel
Manuel
💻 🐛 Yurii Rybak
Yurii Rybak
🐛 Yury Demin
Yury Demin
🐛 💻 + Jon Tewksbury
Jon Tewksbury
💻 🐛 diff --git a/README.md b/README.md index 551eb349..57d2ee14 100644 --- a/README.md +++ b/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](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-)
@@ -422,6 +422,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co Manuel
Manuel
💻 🐛 Yurii Rybak
Yurii Rybak
🐛 Yury Demin
Yury Demin
🐛 💻 + Jon Tewksbury
Jon Tewksbury
💻 🐛 diff --git a/packages/usehooks-ts/README.md b/packages/usehooks-ts/README.md index 551eb349..57d2ee14 100644 --- a/packages/usehooks-ts/README.md +++ b/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](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-)
@@ -422,6 +422,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co Manuel
Manuel
💻 🐛 Yurii Rybak
Yurii Rybak
🐛 Yury Demin
Yury Demin
🐛 💻 + Jon Tewksbury
Jon Tewksbury
💻 🐛 diff --git a/packages/usehooks-ts/src/useScrollLock/useScrollLock.demo.tsx b/packages/usehooks-ts/src/useScrollLock/useScrollLock.demo.tsx index 5fbe64ab..32099eb1 100644 --- a/packages/usehooks-ts/src/useScrollLock/useScrollLock.demo.tsx +++ b/packages/usehooks-ts/src/useScrollLock/useScrollLock.demo.tsx @@ -15,7 +15,7 @@ export function App() { return ( <> -
+
{['red', 'blue', 'green'].map(color => (
))} diff --git a/packages/usehooks-ts/src/useScrollLock/useScrollLock.test.ts b/packages/usehooks-ts/src/useScrollLock/useScrollLock.test.ts index 2eeef34d..d69a6932 100644 --- a/packages/usehooks-ts/src/useScrollLock/useScrollLock.test.ts +++ b/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,46 +37,46 @@ 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', () => { @@ -84,13 +84,13 @@ describe('useScrollLock()', () => { 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', () => { @@ -98,8 +98,8 @@ describe('useScrollLock()', () => { 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('') }) }) diff --git a/packages/usehooks-ts/src/useScrollLock/useScrollLock.ts b/packages/usehooks-ts/src/useScrollLock/useScrollLock.ts index 4c6d709e..b1ba48d8 100644 --- a/packages/usehooks-ts/src/useScrollLock/useScrollLock.ts +++ b/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 } }