I found this snippet online, and I'm looking to alter it slightly.

const scrollText = document.querySelector(".scroll-text");

    window.addEventListener("scroll", () => {
      scrollText.style.left = `${1000 - 1.5 * scrollY}px`;

    });

Right now, I have a heading rolling in from the right side of the screen towards the left side, and it's working smoothly.

What I'd ideally want though, is for the text to stop dead center in the middle of the screen, when the user as scrolled too a certain point down the page.

Could someone kindly tell me how I'd go about implementing something like this?

Here's my HTML and CSS as well for good measure.

HTML:

<div class="test">
    <div class="main wrapper">
      <h1 class="scroll-text">I'm going too far!</h1>
    </div>
  </div>

CSS:

.test {
  background: #ffffff;
  color: #000000;
  overflow-x: hidden;
}

.wrapper {
  position: relative;
  width: 1150px;
  min-height: 50vh;
  margin: 0 auto;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.main .scroll-text {
  position: relative;
  font-size: 5rem;
  white-space: nowrap;
  scroll-snap-align: center;
}