BottomSheet: set body overflow:hidden in animation

This commit is contained in:
thislight 2024-10-09 23:27:47 +08:00
parent 3dba564112
commit 53eefed656

View file

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