Virtual-scroller

by Ammi Reddy Kovvuri

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Virtual scroll</title>
  </head>

  <body>
    <div class="virtual-scroll">
      <div class="list-container">
        <div class="list-container--item">1</div>
        <div class="list-container--item">2</div>
        <div class="list-container--item">3</div>
        <div class="list-container--item">4</div>
         <div class="list-container--item">5</div>
        <div class="list-container--item">6</div>
        <div class="list-container--item">7</div>
        <div class="list-container--item">8</div>
      </div>
    </div>
  </body>

</html>

CSS

.virtual-scroll {
 width: 400px;
 margin: 0 auto;
 position: relative;
 top: 20px;
 height: auto;
 box-shadow: 1px 1px 2px 3px #aaa;
}
.list-container {
  overflow-y: auto;
  height: 90px;
  padding-bottom: 90px;
  box-sizing: content-box;
}