8000 fix(FloatingOverlay): add `lockScroll` scrollbar width CSS var (#3326) · psy-repos-typescript/floating-ui@3977edb · GitHub
[go: up one dir, main page]
Skip to content

Commit 3977edb

Browse files
atomiksatomiks
authored
fix(FloatingOverlay): add lockScroll scrollbar width CSS var (floating-ui#3326)
1 parent d723f38 commit 3977edb

File tree

3 files changed

+18
-1
lines changed

3 files changed

+18
-1
lines changed

‎.changeset/early-frogs-dress.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@floating-ui/react": patch
3+
---
4+
5+
fix(FloatingOverlay): `lockScroll` detection on iPad

‎.changeset/strong-plants-taste.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@floating-ui/react': patch 8000
3+
---
4+
5+
feat(FloatingOverlay): add `lockScroll` scrollbar width CSS variable (`--floating-ui-scrollbar-width`)

‎packages/react/src/components/FloatingOverlay.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import {useModernLayoutEffect, getPlatform} from '@floating-ui/react/utils';
33

44
let lockCount = 0;
5+
const scrollbarProperty = '--floating-ui-scrollbar-width';
56

67
export interface FloatingOverlayProps {
78
/**
@@ -12,7 +13,11 @@ export interface FloatingOverlayProps {
1213
}
1314

1415
function enableScrollLock() {
15-
const isIOS = /iP(hone|ad|od)|iOS/.test(getPlatform());
16+
const platform = getPlatform();
17+
const isIOS =
18+
/iP(hone|ad|od)|iOS/.test(platform) ||
19+
// iPads can claim to be MacIntel
20+
(platform === 'MacIntel' && navigator.maxTouchPoints > 1);
1621
const bodyStyle = document.body.style;
1722
// RTL <body> scrollbar
1823
const scrollbarX =
@@ -25,6 +30,7 @@ function enableScrollLock() {
2530
const scrollY = bodyStyle.top ? parseFloat(bodyStyle.top) : window.scrollY;
2631

2732
bodyStyle.overflow = 'hidden';
33+
bodyStyle.setProperty(scrollbarProperty, `${scrollbarWidth}px`);
2834

2935
if (scrollbarWidth) {
3036
bodyStyle[paddingProp] = `${scrollbarWidth}px`;
@@ -50,6 +56,7 @@ function enableScrollLock() {
5056
overflow: '',
5157
[paddingProp]: '',
5258
});
59+
bodyStyle.removeProperty(scrollbarProperty);
5360

5461
if (isIOS) {
5562
Object.assign(bodyStyle, {

0 commit comments

Comments
 (0)
0