List with controls

by Philipp Gaponenko

HTML

<div class="list-with-controls">
<div class="list-wrapper">
  <ul class="list">
    <li class="list-item">1
    <li class="list-item">2
    <li class="list-item">3
    <li class="list-item">4
    <li class="list-item">5
    <li class="list-item">6
    <li class="list-item">7
    <li class="list-item">8
    <li class="list-item">9
    <li class="list-item">10
    <li class="list-item">11
    <li class="list-item">12
  </ul>
</div>

<div class="controls">
  <button class="controls_btn controls_btn__top">top</button>
  <button class="controls_btn controls_btn__bottom">bottom</button>
</div>

</div>

CSS

.list-with-controls {width:400px;overflow:hidden;;}
.list-wrapper {border:1px solid #c0c0c0;height:100px;overflow:hidden;position:relative;width:100%;}
.list {background:#6f6;height:100%;overflow:auto;position:relative;list-style:none;margin:0;padding:0;width:calc(100% + 40px);}
.list-item {padding-left:20px;}
.list-item:nth-child(odd) {background:#ff2;color:#000000;}
.list-item:nth-child(even) {background:#22f;color:#ffffff;}
.controls {display:flex;justify-content:space-around;}
.controls_btn {background:#c3c3c3;border:none;cursor:pointer;-webkit-apperance:none;width:50%;}
.controls_btn:hover {background:#a1a1a1;}
.controls_btn:active {background:#a1a1a1;color:#ffffff;}

JavaScript

var list = document.querySelector('.list');
var topBtn = document.querySelector('.controls_btn__top');
var bottomBtn = document.querySelector('.controls_btn__bottom');

bottomBtn.addEventListener('mousedown', listScrollBottom);
topBtn.addEventListener('mousedown', listScrollTop);

function listScrollBottom() {
	list.scrollTop += 20;
}

function listScrollTop() {
	list.scrollTop -= 20;
}