dynamic list in a container

by Rajdeep Chandra

HTML

<div class="container">
  <ul>
     <li><a href="" class="items">Lorem 1</a></li>
    <li><a href="" class="items">Lorem 2</a></li>
    <li><a href="" class="items">Lorem 3</a></li>
    <li><a href="" class="items">Lorem 4</a></li>
    <li><a href="" class="items">Lorem 5</a></li>
    <li><a href="" class="items">Lorem 6</a></li>
    <li><a href="" class="items">Lorem 7</a></li>
    <li><a href="" class="items">Lorem 8</a></li>
    <li><a href="" class="items">Lorem 9</a></li>
    <li><a href="" class="items">Lorem 10</a></li>
    <li><a href="" class="items">Lorem 11</a></li>
    <li><a href="" class="items">Lorem 12</a></li>
    <li><a href="" class="items">Lorem 13</a></li>
    <li><a href="" class="items">Lorem 14</a></li>
    <li><a href="" class="items">Lorem 15</a></li>
    <li><a href="" class="items">Lorem 16</a></li>
    <li><a href="" class="items">Lorem 17</a></li>
    <li><a href="" class="items">Lorem 18</a></li>
  </ul>
</div>

SCSS

.container {
  background: #ccc;
  width: 200px;
  height:400px;
  li {
    a {
      padding: 10px;
      display: block;
    }
  }
}

JavaScript

$(document).ready(function() {
  var containerheight = $('.container').outerHeight();
  var outerHeight = 0;
  $('.items').each(function() {
    outerHeight += $(this).outerHeight();
  });
  if (outerHeight > containerheight) {
    $('.container').css('overflow', 'scroll');
  } else {
    console.log('totalheight < containerheight');
  }
});