Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[useScrollLock] Avoid scrollbar layout shift issues #604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 31 commits into from
Sep 17, 2024
Merged

[useScrollLock] Avoid scrollbar layout shift issues #604

Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
39e9ef3
[useLockScroll] Avoid scrollbar issues
atomiks Sep 12, 2024
353ca90
window.scrollTo?. for jsdom
atomiks Sep 12, 2024
f55a1ea
Check for property
atomiks Sep 12, 2024
f9c5894
Check for native scrollTo
atomiks Sep 12, 2024
de27905
Handle original styles
atomiks Sep 12, 2024
51fd682
Handle scrollbar-gutter: stable
atomiks Sep 12, 2024
9e9c74a
Improve nested locking
atomiks Sep 12, 2024
8d23647
Apply to body
atomiks Sep 12, 2024
25438b6
Playground + resize + iOS fixes
atomiks Sep 13, 2024
9392376
Move scrollbarWidth into function
atomiks Sep 13, 2024
c74dc6b
Comments
atomiks Sep 13, 2024
d27e797
typo
atomiks Sep 13, 2024
acefccd
Improve experiment
atomiks Sep 13, 2024
4ccd89b
Use react-aria for iOS
atomiks Sep 13, 2024
2a21a48
Simplify lockIds
atomiks Sep 13, 2024
e3f9bf7
Rewrite implementation
atomiks Sep 16, 2024
66abfac
Remove body style
atomiks Sep 16, 2024
01fec79
Remove id
atomiks Sep 16, 2024
bc8ecc9
Handle constant overflow
atomiks Sep 16, 2024
bbf5374
Handle dual scrollbars
atomiks Sep 16, 2024
512c5d0
Update docs/app/experiments/scroll-lock.tsx
atomiks Sep 16, 2024
88e0e4f
getComputedStyle
atomiks Sep 16, 2024
a7fbacf
perf
atomiks Sep 16, 2024
87444f8
Remove return
atomiks Sep 16, 2024
70bbdfa
Conditional fixed styles
atomiks Sep 16, 2024
8c8adc2
Assign vars earlier
atomiks Sep 16, 2024
80ec0c1
Add scrollable x check
atomiks Sep 16, 2024
56ca8b9
Handle body overflow
atomiks Sep 16, 2024
2458dc0
Handle body overflow
atomiks Sep 16, 2024
d8715dd
Update packages/mui-base/src/utils/useScrollLock.ts
atomiks Sep 16, 2024
a9d020e
Add iOS implementation
atomiks Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Handle scrollbar-gutter: stable
  • Loading branch information
@atomiks
atomiks committed Sep 12, 2024
commit 51fd6823679735a6df62d45109a55e3ed38a07ce
2 changes: 1 addition & 1 deletion packages/mui-base/src/utils/useScrollLock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function useScrollLock(enabled: boolean = true) {
};

Object.assign(rootStyle, {
position: 'fixed',
position: html.scrollHeight > html.clientHeight ? 'fixed' : '',
top: `${-(scrollY - Math.floor(offsetTop))}px`,
left: `${-(scrollX - Math.floor(offsetLeft))}px`,
right: '0',
Expand Down