How to prevent scrolling until a CSS animation is completed

I am working on a web project where I am starting off my page load with a full page div that animates with a fade-out animation using CSS. I am using a bootstrap spinner to display a loading image on top of the full page div, and I want to disable scrolling until the animation is completed. I know there’s probably more elegant ways of coding this, but I am working on this project for a class where we are implementing bootstrap as much as possible, so I want to go this route for this reason. This is the basic solution that I came up with, but it doesn’t seem to work.

CSS

body {
  overflow-y: hidden;
  overflow-x: hidden;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #532146;
  height: 100svh;
  width: 100vw;
  z-index: 101;
}

JS

const fullPage = getElementByTagName('body');
const overlay = getElementByID('overlay');

setTimeout(() => {
    fullPage.style.removeProperty('overflow-y');
    overlay.classList.remove('overlay');
}, 7000);

Any ideas for how I can include the bootstrap spinner while the images load are appreciated.