<div class="mandatory">
  <section class="section section-1">Mandatory</section>
  <section class="section section-2">Seção 2</section>
  <section class="section section-3">Seção 3</section>
  <section class="section section-4">Seção 4</section>
  <section class="section section-5">Seção 5</section>
  <section class="section section-6">Seção 6</section>
  <section class="section section-7">Seção 7</section>
  <section class="section section-8">Seção 8</section>
</div>
<div class="proximity">
  <section class="section section-1">Proximity</section>
  <section class="section section-2">Seção 2</section>
  <section class="section section-3">Seção 3</section>
  <section class="section section-4">Seção 4</section>
  <section class="section section-5">Seção 5</section>
  <section class="section section-6">Seção 6</section>
  <section class="section section-7">Seção 7</section>
  <section class="section section-8">Seção 8</section>
</div>

body {
  display: flex;
}

.mandatory {
  flex: 1;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  border-right: 5px solid black;
}

.proximity {
  flex: 1;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y proximity;
}

.section {
  scroll-snap-align: start;

  height: 90vh;
  color: white;
  font-size: 30px;
  font-weight: bold;
  padding: 40px;
  box-sizing: border-box;
}

.section-1 {
  background: #3182ce;
}

.section-2 {
  background: #805ad5;
}

.section-3 {
  background: #38a169;
}

.section-4 {
  background: #63b3ed;
}

.section-5 {
  background: #ed8936;
}

.section-6 {
  background: #38b2ac;
}

.section-7 {
  background: #ecc94b;
}

.section-8 {
  background: #f56565;
}