Javascript горизонтальная прокрутка

Question

У меня есть код. Которая работает на 100вх. Хотелось бы сделать его более универсальным. Я хочу добавить к блокам заголовок и текст. Чтобы это было видно одновременно с блоками. Inte rnet полон инструкций о том, как это сделать. Я не нашел способа сделать это с переменной высотой. Чтобы зона прокрутки была размером с блоки? Я даже не уверен насчет логи c.

const spaceHolder = document.querySelector('[data-scroll-holder]');
const horizontal = document.querySelector('[data-scroll-horizontal]');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;

function calcDynamicHeight(ref) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const objectWidth = ref.scrollWidth;
  return objectWidth - vw + vh + 150;
}

window.addEventListener('scroll', () => {
  const sticky = document.querySelector('[data-scroll-sticky]');
  horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});

window.addEventListener('resize', () => {
  spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});

.stickyScroll__content,
.stickyScroll__links {
  display: none; // remove this
}


.stickyScroll {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.stickyScroll__space {
  position: relative;
  width: 100%;
}

.stickyScroll__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.stickyScroll__horizontal {
  position: absolute;
  height: 100%;
  will-change: transform;
}

.stickyScroll__items {
  position: relative;
  height: 100%;
  padding: 0 0 0 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.stickyScroll__item {
  position: relative;
  height: 25em;
  width: 30em;
  padding: 1em;
  background-color: black;
  color: white;
  margin-right: 75px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.placeholders {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #e0e0e0;
  min-height: 100vh;
}

.placeholders p {
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

*:before,
*:after,
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 1.3;
  background-color: white;
  position: relative;
}

html {
  height: 100%;
}

<div class="placeholders">
        <h1>HorizontalScroll</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio in dolore veniam officiis necessitatibus
            consequatur, accusantium recusandae quidem ea. Sunt.</p>
    </div>

    <div class="stickyScroll">
        <div class="stickyScroll__space" data-scroll-holder>
            <div class="stickyScroll__sticky" data-scroll-sticky>
                <div class="stickyScroll__horizontal" data-scroll-horizontal>
                    <div class="stickyScroll__content">
                        <h2>Some title</h2>
                        <p>Some text Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, eveniet?</p>
                    </div>
                    <div class="stickyScroll__items">
                        <div class="stickyScroll__item">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, fugiat quaerat. Consectetur
                                dolore nesciunt optio ipsum quia quis, quibusdam maxime cumque eveniet tempora, atque
                                exercitationem provident. Corporis, deleniti? Suscipit, ut?</p>
                        </div>
                        <div class="stickyScroll__item">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, fugiat quaerat. Consectetur
                                dolore nesciunt optio ipsum quia quis, quibusdam maxime cumque eveniet tempora, atque
                                exercitationem provident. Corporis, deleniti? Suscipit, ut?</p>
                        </div>
                        <div class="stickyScroll__item">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, fugiat quaerat. Consectetur
                                dolore nesciunt optio ipsum quia quis, quibusdam maxime cumque eveniet tempora, atque
                                exercitationem provident. Corporis, deleniti? Suscipit, ut?</p>
                        </div>
                        <div class="stickyScroll__item">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, fugiat quaerat. Consectetur
                                dolore nesciunt optio ipsum quia quis, quibusdam maxime cumque eveniet tempora, atque
                                exercitationem provident. Corporis, deleniti? Suscipit, ut?</p>
                        </div>
                        <div class="stickyScroll__item">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, fugiat quaerat. Consectetur
                                dolore nesciunt optio ipsum quia quis, quibusdam maxime cumque eveniet tempora, atque
                                exercitationem provident. Corporis, deleniti? Suscipit, ut?</p>
                        </div>
                        <div class="stickyScroll__item">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, fugiat quaerat. Consectetur
                                dolore nesciunt optio ipsum quia quis, quibusdam maxime cumque eveniet tempora, atque
                                exercitationem provident. Corporis, deleniti? Suscipit, ut?</p>
                        </div>
                    </div>

                    <div class="stickyScroll__links">
                        <a href="#">URL link</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="placeholders">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio in dolore veniam officiis necessitatibus
            consequatur, accusantium recusandae quidem ea. Sunt.</p>
    </div>

Как я хочу, чтобы это работало введите описание изображения здесь