v-scroll with absolute positioning

by jwerre

HTML

<main>
  <div style="wrapper">

    <div class="item">
      <h2> Short item </h2>
      <h3> Paragraph 1</h3>
      <p>Cras in nulla ut justo tincidunt euismod. Pellentesque felis libero, vulputate eget mauris vitae, pharetra tristique justo. Praesent ultricies felis eu dignissim facilisis. Duis gravida dolor interdum urna volutpat, nec ultricies risus placerat. Duis purus diam, viverra vel ullamcorper at, dignissim eget purus. Nunc accumsan ornare risus, rutrum laoreet sem facilisis ut. Integer congue tempus consequat. Nulla facilisi. Nunc nec ipsum nisl. Nullam vehicula nisi dictum fermentum ornare. Donec placerat enim tellus, ac dictum justo laoreet in. Quisque vel nunc id dolor fermentum tincidunt et et risus. Curabitur egestas a eros non aliquam. In euismod, erat at placerat iaculis, erat sapien mollis turpis, vitae sodales metus sem in massa. Aliquam imperdiet sagittis neque bibendum interdum.
      </p>

      <h3> Paragraph 2</h3>
      <p>Cras in nulla ut justo tincidunt euismod. Pellentesque felis libero, vulputate eget mauris vitae, pharetra tristique justo. Praesent ultricies felis eu dignissim facilisis. Duis gravida dolor interdum urna volutpat, nec ultricies risus placerat. Duis purus diam, viverra vel ullamcorper at, dignissim eget purus. Nunc accumsan ornare risus, rutrum laoreet sem facilisis ut. Integer congue tempus consequat. Nulla facilisi. Nunc nec ipsum nisl. Nullam vehicula nisi dictum fermentum ornare. Donec placerat enim tellus, ac dictum justo laoreet in. Quisque vel nunc id dolor fermentum tincidunt et et risus. Curabitur egestas a eros non aliquam. In euismod, erat at placerat iaculis, erat sapien mollis turpis, vitae sodales metus sem in massa. Aliquam imperdiet sagittis neque bibendum interdum.
      </p>

    </div>

    <div class="item active">
      <h2> Tall item </h2>
      <h3> Paragraph 1</h3>
      <p>Cras in nulla ut justo tincidunt euismod. Pellentesque felis libero, vulputate eget mauris vitae, pharetra tristique...

CSS

body {
	margin: 0;
	padding: 0;
}

main {
	width: auto;
	height: auto;
	overflow-x: hidden;
}

.wrapper {
	height: auto;
}

.item {
	box-sizing: border-box;
    position: absolute;
    background-color: red;
	width: calc(100% - 50px);
	min-width: 320px;
	max-width: 1024px;
	left: 150%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: white;
	padding: 25px;
}

.item.active {
	left: 50%;
}

p {
	padding: 10px 0;
}