Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

BottomSheet: set body overflow:hidden in animation

Browse source
This commit is contained in:
thislight 2024-10-09 23:27:47 +08:00
parent 3dba564112
commit 53eefed656
1 changed files with 6 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/material/BottomSheet.tsx
View file

@ -111,6 +111,8 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
element.classList.add(styles.animated); element.classList.add(styles.animated);
const oldOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
const distance = Math.abs(rect.left - window.innerWidth); const distance = Math.abs(rect.left - window.innerWidth);
const duration = (distance / MOVE_SPEED) * 1000; const duration = (distance / MOVE_SPEED) * 1000;
@ -127,6 +129,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
); );
const onAnimationEnd = () => { const onAnimationEnd = () => {
element.classList.remove(styles.animated); element.classList.remove(styles.animated);
document.body.style.overflow = oldOverflow;
animation = undefined; animation = undefined;
}; };
animation.addEventListener("cancel", onAnimationEnd); animation.addEventListener("cancel", onAnimationEnd);
@ -141,6 +144,8 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
element.classList.add(styles.animated); element.classList.add(styles.animated);
const oldOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
const distance = Math.abs(rect.top - window.innerHeight); const distance = Math.abs(rect.top - window.innerHeight);
const duration = (distance / MOVE_SPEED) * 1000; const duration = (distance / MOVE_SPEED) * 1000;
@ -157,6 +162,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
); );
const onAnimationEnd = () => { const onAnimationEnd = () => {
element.classList.remove(styles.animated); element.classList.remove(styles.animated);
document.body.style.overflow = oldOverflow;
animation = undefined; animation = undefined;
}; };
animation.addEventListener("cancel", onAnimationEnd); animation.addEventListener("cancel", onAnimationEnd);