BottomSheet: set body overflow:hidden in animation
This commit is contained in:
parent
3dba564112
commit
53eefed656
1 changed files with 6 additions and 0 deletions
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue