title: Scroll behaving strangely in ul li
body: <p>I am trying to implement auto-scrolling when user presses up or down arrow key the next or previous item should be selected respectively. Also, if selected item is not in visible area then it should be scrolled to the visible area.</p>
  
  <p>So, I have tried to do that but scrolling does not work as expected.</p>
  
  <p>Here is the link to my <h1>JS Fiddle</h1></p>
  
  <p><a href="https://jsfiddle.net/Vishal1419/03m9j8wd/8/" rel="nofollow">jsfiddle link</a></p>
  
  <p>If you want to see the code here:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="combobox"&gt;
    &lt;input type="text" class="txtbox"/&gt;
    &lt;button class="txtbox-btn"&gt;GO&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul class="combobox-options"&gt;
    &lt;li&gt;&lt;span&gt;AAA&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;BBB&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;CCC&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;DDD&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;AAA1&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;AAA2&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;AAA3&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;BBB1&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;BBB2&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;BBB3&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;CCC1&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;CCC2&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;CCC3&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
  }
  
  /*html, input, textarea, a{
    font-family: 'Montserrat';
  }*/
  
  input[type="text"].txtbox {
    color: #000000;
    height: 60px;
    width: 260px;
    font-size: 22px;
    /*border: none;*/
    padding-left: 21px;
  }
  
  .txtbox-btn {
    width: 60px;
    height: 60px;
    background: #1f7f5c;
    border: none;
    text-align: center;
    text-decoration: none;
    line-height: 60px;
    color: #fff;
  }
  
  .combobox {
    position: relative;
    width: 320px;
    height: 60px;
  }
  
  .combobox input[type="text"].txtbox,
  .combobox .txtbox-btn{
    position: absolute;
  }
  
  .combobox .txtbox-btn{
    right: 0;
  }
  
  .combobox + .combobox-options{
    width: 320px;
    position: absolute;
    background: #1f7f5c;
    color: #fff;
  }
  
  .combobox + .combobox-options li {
    height: 50px;
    padding: : 12px;
    border-bottom: 1px solid #2a8664;
    display: table;
    width: 100%;
  }
  
  .combobox + .combobox-options li span {
    padding-left: 21px;
    font-size: 22px;
    display: table-cell;
    vertical-align: middle;
  }
  
  .selected {
    background: #0055ee;
  }
  
  .combobox-options{
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$('input').on('keydown', function(e){
      var $results = $('.combobox-options li span');
  
      if(e.keyCode == 40) { //down arrow
      if($($results).hasClass('selected')){
        var selectedComboItem = $($results).filter('.selected');
        if(selectedComboItem.parents('li').next().length == 1){
          $('.selected').removeClass('selected');
          selectedComboItem.parents('li').next().children('span').addClass('selected');
          scrollMe(selectedComboItem, $('.combobox-options'));
        } else {
          $('.selected').removeClass('selected');
        }
      }
      else {
        $results.first().addClass('selected');
        scrollMe(selectedComboItem, $('.combobox-options'));
      }
  
      e.preventDefault();
    }
  
    if(e.keyCode == 38) { //up arrow
      if($results.hasClass('selected')){
        var selectedComboItem = $($results).filter('.selected');
        if(selectedComboItem.parents('li').prev().length == 1){
          $('.selected').removeClass('selected');
          selectedComboItem.parents('li').prev().children('span').addClass('selected');
          scrollMe(selectedComboItem, $('.combobox-options'));
        } else {
          $('.selected').removeClass('selected');
        }
      }
      else {
        $results.last().addClass('selected');
        scrollMe(selectedComboItem, $('.combobox-options'));
      }
  
      e.preventDefault();
    }
  
  });
  function scrollMe(element, container){
    var offset = $(container).find('li').first().position().top;
    $(container).scrollTop($(element).position().top - offset);   
  };
  </code></pre>