Changing vertical scroll to horizontal at a point for a specific element

var content = document.getElementById('content_2');
window.addEventListener('scroll', function() {
  var scrolledY = window.scrollY;
  var scrolledX = window.scrollX;

  if (scrolledY > 625 && scrolledY < 3112) {
    content.style.marginTop = 150 + 'px';
    content.style.position = "fixed";
    content.style.top = scrolledY * 0.001 + 'px';
    content.style.left = -(scrolledY - 625) * 0.55 + 'px';

  }
  if (scrolledY <= 625) {
    content.style.position = "initial";

  }
  if (scrolledY >= 3112) {

    content.style.position = "absolute";
    content.style.top = 3112 + 'px';

  }


});

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Arial';
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-height: 4400px;
}

.content_1,
.content_2 {
  height: 100vh;
  width: 100vw;
}

.content_1 {
  background-color: black;
  color: white;
}

.content_1 h1 {
  font-size: 200px;
  text-align: center;
}

.content_2 {
  margin-top: 150px;
  top: 625px;
  white-space: nowrap;
  display: flex;
  height: 80vh;
  width: 200vw;
  position: fixed;
  flex-direction: row;
  flex-wrap: nowrap;
}

.content_3 {
  font-size: 20px;
  margin-top: 3050px;
}

.card {
  background-color: red;
  color: white;
  white-space: nowrap;
  text-align: center;
  height: 300px;
  width: 300px;
  margin: 10px 30px 10px 10px;
}

<div class="content_1">
  <h1>First Page</h1>
</div>
<div class="content_2" id="content_2">
  <div class="card" style="background-color: #FF7A7A;">Card-1</div>
  <div class="card" style="background-color: #FF3C3C;">Card-2</div>
  <div class="card">Card-3</div>
  <div class="card" style="background-color: #FF3600;">Card-4</div>
  <div class="card" style="background-color: #FF871C;">Card-5</div>
  <div class="card" style="background-color: #FFA91C;">Card-6</div>
  <div class="card" style="background-color: #FFC11D;">Card-7</div>
  <div class="card" style="background-color: #FFF81D;">Card-8</div>
</div>
<div class="content_3">
  <p>Senectus purus, molestie blandit sociis eu leo blandit platea commodo aptent scelerisque cursus. Hac vel himenaeos hendrerit eu pellentesque. Lorem natoque praesent dictum porta, aliquam bibendum laoreet class litora? Class nullam maecenas aliquet.
    Ligula, et enim vel rutrum luctus lorem orci fringilla in erat? Bibendum magnis nec volutpat non netus dignissim. Tempus tempor penatibus nulla egestas semper scelerisque cubilia. Nulla adipiscing per porta consequat et imperdiet posuere magna fringilla
    rhoncus conubia. Sapien proin euismod.
  </p>
  <p>Tempus luctus tempor donec pretium lectus leo facilisis leo, inceptos nostra lorem vel. Orci parturient urna etiam pharetra sit lacus volutpat id sed lacinia. Scelerisque ultrices nisi risus aenean tincidunt, amet arcu tempus id curabitur purus fringilla.
    Eros iaculis vitae vitae rutrum ultricies dolor sociis ante ante ut. Ut nibh primis himenaeos egestas dictumst congue scelerisque!
  </p>
  <p>Blandit sociis quisque ultrices montes tortor. Penatibus risus primis, senectus nam nostra. Egestas, nulla vitae penatibus cursus sed. Luctus, eget dignissim porttitor et curae; accumsan. Accumsan blandit ligula sollicitudin. Ligula mattis ad turpis
    arcu mus laoreet conubia risus accumsan quis lobortis. Nisi sollicitudin penatibus lacus nam justo id commodo sagittis. Leo orci.
  </p>

  <p>Fringilla sociosqu laoreet id, dui lobortis condimentum? Facilisis non, cubilia diam. Egestas aptent ornare et felis morbi senectus molestie, egestas donec himenaeos ultrices himenaeos. Condimentum conubia nisl urna lobortis pharetra adipiscing cras
    eget pellentesque sollicitudin faucibus. Scelerisque lobortis nascetur neque ac quam dignissim fames. Magnis pharetra dignissim nullam sapien eu curabitur, ridiculus dapibus. Aptent tempus nibh eget scelerisque magna ipsum turpis. Taciti nostra morbi
    pharetra montes sagittis posuere mollis.
  </p>
  <p>Taciti tortor phasellus placerat inceptos tristique consectetur accumsan vitae potenti sodales nulla eros. Dapibus scelerisque penatibus nisl accumsan ultricies ridiculus porta. Varius tellus erat laoreet morbi tempor tristique. Sapien, sem morbi libero
    dapibus curabitur. Facilisi habitasse feugiat semper magnis risus id tellus libero semper. Vehicula turpis elit lectus interdum metus ultrices mollis consectetur cubilia.
  </p>
  <p>Senectus purus, molestie blandit sociis eu leo blandit platea commodo aptent scelerisque cursus. Hac vel himenaeos hendrerit eu pellentesque. Lorem natoque praesent dictum porta, aliquam bibendum laoreet class litora? Class nullam maecenas aliquet.
    Ligula, et enim vel rutrum luctus lorem orci fringilla in erat? Bibendum magnis nec volutpat non netus dignissim. Tempus tempor penatibus nulla egestas semper scelerisque cubilia. Nulla adipiscing per porta consequat et imperdiet posuere magna fringilla
    rhoncus conubia. Sapien proin euismod.
  </p>

  <p>Tempus luctus tempor donec pretium lectus leo facilisis leo, inceptos nostra lorem vel. Orci parturient urna etiam pharetra sit lacus volutpat id sed lacinia. Scelerisque ultrices nisi risus aenean tincidunt, amet arcu tempus id curabitur purus fringilla.
    Eros iaculis vitae vitae rutrum ultricies dolor sociis ante ante ut. Ut nibh primis himenaeos egestas dictumst congue scelerisque!
  </p>
  <p>Blandit sociis quisque ultrices montes tortor. Penatibus risus primis, senectus nam nostra. Egestas, nulla vitae penatibus cursus sed. Luctus, eget dignissim porttitor et curae; accumsan. Accumsan blandit ligula sollicitudin. Ligula mattis ad turpis
    arcu mus laoreet conubia risus accumsan quis lobortis. Nisi sollicitudin penatibus lacus nam justo id commodo sagittis. Leo orci.
  </p>
  <p>Fringilla sociosqu laoreet id, dui lobortis condimentum? Facilisis non, cubilia diam. Egestas aptent ornare et felis morbi senectus molestie, egestas donec himenaeos ultrices himenaeos. Condimentum conubia nisl urna lobortis pharetra adipiscing cras
    eget pellentesque sollicitudin faucibus. Scelerisque lobortis nascetur neque ac quam dignissim fames. Magnis pharetra dignissim nullam sapien eu curabitur, ridiculus dapibus. Aptent tempus nibh eget scelerisque magna ipsum turpis. Taciti nostra morbi
    pharetra montes sagittis posuere mollis.
  </p>
  <p>Taciti tortor phasellus placerat inceptos tristique consectetur accumsan vitae potenti sodales nulla eros. Dapibus scelerisque penatibus nisl accumsan ultricies ridiculus porta. Varius tellus erat laoreet morbi tempor tristique. Sapien, sem morbi libero
    dapibus curabitur. Facilisi habitasse feugiat semper magnis risus id tellus libero semper. Vehicula turpis elit lectus interdum metus ultrices mollis consectetur cubilia.
  </p>
</div>