Как сделать прокрутку списка ul>li

let list = (e) => { 
  let list = e.children[1], step = list.clientHeight; 
  [...list_1.querySelectorAll("[data-scroll]")].forEach(e => e.addEventListener("click", () => list.scrollTop += Number(e.dataset.scroll) ? step : -step)); 
} 
 
list(list_1);

.list { 
  height: 200px; 
  width: 200px; 
  overflow: hidden; 
} 
 
.list>[data-scroll] { 
  padding: 10px; 
  cursor: pointer; 
  text-align: center; 
  display: block; 
  background-color: rgba(0, 0, 0, .05); 
  -webkit-user-select: none; 
} 
 
.list>ul { 
  list-style: none; 
  padding: 0px; 
  margin: 0px; 
  max-height: calc(100% - 76px); 
  overflow: auto; 
} 
 
.list>ul>li { 
  padding: 10px; 
}

<div class="list" id="list_1"> 
  <span data-scroll="0">up</span> 
  <ul> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
    <li>title</li> 
  </ul> 
  <span data-scroll="1">down</span> 
</div>