CSS overscroll-behavior-inline Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f3f4f6;
  color: #0f172a;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 900px;
  margin: 0 auto;
}

h2 {
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 600;
}

/* Horizontal carousels */
.carousel {
  display: flex;
  gap: 12px;
  padding: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(2,6,23,0.06);
}

/* Default behavior (scroll chains to parent/page when reaching edges) */
.carousel.default {
  overscroll-behavior-inline: auto; /* default; included for clarity */
}

/* Contain inline overscroll so scrolling doesn't chain to the page */
.carousel.contain {
  overscroll-behavior-inline: contain;
}

.item {
  flex: 0 0 180px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  user-select: none;
}

.note {
  margin-top: 14px;
  font-size: 13px;
  color: #334155;
}
</style></head><body><div class="page">
  <h2>Default (overscroll-behavior-inline: auto)</h2>
  <div class="carousel default">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <h2>Contain (overscroll-behavior-inline: contain)</h2>
  <div class="carousel contain">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <p class="note">Try swiping horizontally (touch or trackpad). The second carousel prevents scroll chaining to the page when you reach its inline edges.</p>
</div></body></html>