diff --git a/src/components/player/atoms/Volume.tsx b/src/components/player/atoms/Volume.tsx
index 6f97a14f..62662de1 100644
--- a/src/components/player/atoms/Volume.tsx
+++ b/src/components/player/atoms/Volume.tsx
@@ -41,8 +41,13 @@ export function Volume(props: Props) {
 
   const handleMouseEnter = useCallback(async () => {
     if (await canChangeVolume()) setHovering(true);
+    document.body.classList.add("overflow-y-hidden");
   }, [setHovering]);
 
+  const handleMouseLeave = () => {
+    document.body.classList.remove("overflow-y-hidden");
+  };
+
   let percentage = makePercentage(volume * 100);
   if (dragging) percentage = makePercentage(dragPercentage);
   const percentageString = makePercentageString(percentage);
@@ -61,6 +66,7 @@ export function Volume(props: Props) {
     <div
       className={props.className}
       onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       onWheel={handleWheel}
     >
       <div className="pointer-events-auto flex cursor-pointer items-center py-0 touch-none">