JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<link rel="stylesheet" href="https://cdnjs.xueliang.org/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<form class="form">
  <div class="form-group">
    <input type="number" id="item" min="1" class="form-control" value="1">
  </div>
</form>
<ul class="list-group">
  <li class="list-group-item list-group-item-success">1</li>
  <li class="list-group-item list-group-item-info">2</li>
  <li class="list-group-item list-group-item-warning">3</li>
  <li class="list-group-item list-group-item-danger">4</li>
  <li class="list-group-item list-group-item-success">5</li>
  <li class="list-group-item list-group-item-info">6</li>
  <li class="list-group-item list-group-item-warning">7</li>
  <li class="list-group-item list-group-item-danger">8</li>
  <li class="list-group-item list-group-item-success">9</li>
  <li class="list-group-item list-group-item-info">10</li>
  <li class="list-group-item list-group-item-warning">11</li>
  <li class="list-group-item list-group-item-danger">12</li>
  <li class="list-group-item list-group-item-success">13</li>
  <li class="list-group-item list-group-item-info">14</li>
  <li class="list-group-item list-group-item-warning">15</li>
  <li class="list-group-item list-group-item-danger">16</li>
  <li class="list-group-item list-group-item-success">17</li>
  <li class="list-group-item list-group-item-info">18</li>
  <li class="list-group-item list-group-item-warning">19</li>
  <li class="list-group-item list-group-item-danger">20</li>
  <li class="list-group-item list-group-item-success">21</li>
  <li class="list-group-item list-group-item-info">22</li>
  <li class="list-group-item list-group-item-warning">23</li>
  <li class="list-group-item list-group-item-danger">24</li>
  <li class="list-group-item list-group-item-success">25</li>
  <li class="list-group-item list-group-item-info">26</li>
  <li class="list-group-item list-group-item-warning">27</li>
  <li class="list-group-item list-group-item-danger">28</li>
  <li...

CSS

ul.list-group {
  height: 300px;
  overflow-y: scroll;
}

JavaScript

document.getElementById('item').addEventListener('change', function(event) {
  var value = this.value;
  if (!(/^[\d]+$/.test(value))) {
    return;
  }
  var index = parseInt(value) - 1;
  var $container = document.querySelector('ul.list-group');
  var $item = document.querySelectorAll('ul.list-group li').item(index);
  $container.scrollTop = $item.offsetTop - $container.offsetTop;
});