<ul class="list">
  <li>
    <h3>Item One</h3>
    <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori.</p>
  </li>
  <li>
    <h3>Item Two</h3>
    <p>Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
  </li>
  <li>
    <h3>Item Three</h3>
    <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea.</p>
  </li>
  <li>
    <h3>Item Four</h3>
    <p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane.</p>
  </li>
  <li>
    <h3>Item Five</h3>
    <p>Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula.</p>
  </li>
</ul>
* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #333;
  font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
}

.list {
  border: 5px solid rgb(75, 70, 74);
  margin: 2em 4em;
  padding: 0;
  list-style-type: none;
  height: 400px;
  width: 250px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.list li {
  scroll-snap-align: start;
}

.list h3 {
  background-color: rgb(75, 70, 74);
  margin: 0;
  padding: 10px;
  color: #fff;
}

.list p {
  margin: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.