JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="gap"></div>
<div class="split">
  <div class="scroll">
    <a href="#target-1" class="link">to target 1</a>
    <div class="spacer"></div>
    <div id="target-1" class="target">target 1</div>
    <div class="spacer"></div>
  </div>
  <div class="scroll">
    <a href="#target-2" class="link">to target 2</a>
    <div class="spacer"></div>
    <div id="target-2" class="target">target 2</div>
    <div class="spacer"></div>
  </div>
</div>
<div class="gap"></div>

CSS

body { margin: 0; }

html,
body {
  scroll-padding-top: 150px;
}

.split {
  display: flex;
  flex-direction: row;
}

.scroll {
  height: 200px;
  width: 100%;
  overflow: scroll;
}

.scroll + .scroll { scroll-padding-top: 150px; }

.gap {
  background: red;
  height: 50px;
}
.gap ~ .gap { height: calc(100vh - 50px); }
.spacer { height: 100%; }
.target { background: grey; }

.link,
.target {
  display: block;
  height: 50px;
}