JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="win">
  <div class="slide">
    <div class="content"></div>
    <div class="revup">
      <div class="rev"></div>
    </div>
  </div>
</div>

CSS

.win {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  background: #bee;
  -webkit-overflow-scrolling: touch;
}

.slide {
  display: flex;
  --heightcontent: 500vh;
}
.content {
  height: var(--heightcontent);
  width: 50%;
  background-image: repeating-linear-gradient(to bottom, #fbd 0vh, #fbd 100vh, #f9f 100vh, #f9f 200vh)
}
.revup {
  width: 50%;
}
.revup::before,
.revup::after {
  content: '';
  height: var(--heightcontent);
  display: block;
}
.rev {
  background-image: repeating-linear-gradient(to top, #fbd 0vh, #fbd 100vh, #f9f 100vh, #f9f 200vh);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border-left: 2vw solid transparent;
  background-clip: content-box;
  height: var(--heightcontent);
  --heightneg: calc(-1 * var(--heightcontent));
  margin-bottom: var(--heightneg);
  margin-top: var(--heightneg);
}

/* following code AND remove margins w/ box offsets is transform vers */
/* 
.rev {
  position: absolute;
  transform: scale(1) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1) translateZ(-2px);
  transform-origin: left center;
}
 */