CSS scroll-padding-bottom Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic layout and reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f4f6f8;
  color: #0b1a2b;
  padding: 20px;
  height: 100vh;
  display: flex;
  align-items: stretch;
}

.demo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to scroll */
}

/* Scroll container */
.scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(15, 31, 47, 0.06);

  /* Enable scroll snapping on the y axis */
  scroll-snap-type: y mandatory;

  /* Important: reserve 80px at the bottom of the scrollport
     so snapped targets or fragment navigation won't be hidden
     by the sticky footer */
  scroll-padding-bottom: 80px;
}

.links {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.links a {
  text-decoration: none;
  color: #0366d6;
  background: #eaf4ff;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
}

.panel {
  height: 260px;
  scroll-snap-align: start;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f3fbff 100%);
  border: 1px solid #e3eefb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel h2 {
  margin-bottom: 8px;
  font-size: 20px;
}

.footer {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  height: 80px;
  background: #023047;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(2, 48, 71, 0.32);
  pointer-events: none; /* let clicks pass through for the demo */
}

/* Small responsive tweak */
@media (max-width: 480px) {
  .panel { height: 220px; }
  .links { flex-wrap: wrap; }
}
</style></head><body><div class='demo'>
    <div class='scroller' tabindex='0'>
      <nav class='links'>
        <a href='#s1'>Section 1</a>
        <a href='#s2'>Section 2</a>
        <a href='#s3'>Section 3</a>
        <a href='#s4'>Section 4</a>
        <a href='#s5'>Section 5</a>
      </nav>

      <section id='s1' class='panel'>
        <h2>Section 1</h2>
        <p>This is the first panel.</p>
      </section>

      <section id='s2' class='panel'>
        <h2>Section 2</h2>
        <p>This is the second panel.</p>
      </section>

      <section id='s3' class='panel'>
        <h2>Section 3</h2>
        <p>This is the third panel.</p>
      </section>

      <section id='s4' class='panel'>
        <h2>Section 4</h2>
        <p>This is the fourth panel.</p>
      </section>

      <section id='s5' class='panel'>
        <h2>Section 5</h2>
        <p>This is the fifth panel.</p>
      </section>
    </div>

    <footer class='footer'>Sticky footer (80px tall)  -  covers content</footer>
  </div></body></html>