JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div class="vertical-sections">
  <section>
    <h1>Section 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Esse ea consequatur quam, iusto cumque delectus
    tenetur eum in dicta, debitis earum eaque venia
    iste soluta dignissimos provident.
    Natus libero atque, totam, vel quam aut repellat,
    ea rem odio eligendi reprehenderit ad accusantium
    voluptatibus at excepturi tempora
    id animi sit dolorem.</p>
  </section>
  <section>
    <h1>Section 2</h1>
    <p>Dolor molestias, accusantiu
    doloremque, quis repellat quidem possimus quos, 
    perspiciatis debitis in ducimu
    autem facilis provident a aperiam e
    que placeat officiis ex odio laboriosam quia! Illo voluptat
    rerum quas consectetur, maxime 
    uae iste reiciendis modi aspernatur
    voluptate nostrum veniam cum, repudiandae animi facere totam.
    Minus in adipisci molestias magn
    consectetur!</p>
  </section>
  <section>
    <h1>Section 3</h1>
    <p>A odit fugiat rem nesciunt qu
    m, reiciendis voluptate tempore, libero eius corporis minus qui. 
    aboriosam, autem dolor, delenit
    deserunt vel voluptas, quae porro, f
    git delectus natus quod. Mollitia debitis ex quia officia 
    periam nisi cupiditate at quisq
    am deleniti porro, placeat, amet har
    m, ut iusto ab nostrum hic aspernatur corporis voluptas.</p>
  </section>
  <section>
    <h1>Section 4</h1>
    <p>Quo exercitationem reprehenderit
    distinctio tempora, temporibus consequatur! Maxime ipsam aliquam 
    placeat sit quam, excepturi offici
    s, odit dolorem asperiores non quibusda
    necessitatibus mollitia blanditiis voluptatum quo
    consequuntur laborum magni rem de
    ectus commodi, molestiae. Magnam archi
    ecto, illum consequuntur minima quisquam sequi ius
    o, qui nisi doloremque at quis.
    Impedit suscipit non, accusantium magnam.</p>
  </section>
  <section>
    <h1>Section 5</h1>
    <p>Quam nisi dolore excepturi assumenda autem aut i
    ventore...

CSS

body {
  margin: 0;
}

.vertical-sections {
  display: flex;
  flex-wrap: nowrap;
  width: 600vw; /* valeur Ă  ajuster dynamiquement */
}

section {
  width: 100vw;
  min-height: 100vh;
  background-color: #000;
  overflow: auto;
  padding: 1em;
  color: #fff;
}

section:nth-child(even) {
  background-color: #444;
}

JavaScript

window.onscroll = (event) => {
	console.log(event);
	window.scrollTo(window.scrollX + 100, window.scrollY);
}