Как реализовать это небольшое окно слева с выбором и скроллом?

.block{ 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
  justify-content: center; 
  -ms-align-items: center; 
  align-items: center; 
  font-size: 30px; 
} 
 
.bl-right{ 
  margin-left: 20px; 
  border-right: 5px solid transparent; 
  padding-right: 5px; 
} 
.bl-right:before {  
   content: "\f107"; 
  font-family: FontAwesome; 
} 
.bl-right:hover{ 
  border-right: 5px solid #00CB85; 
   
} 
.bl-right:hover:before{ 
  color: #00CB85; 
}

<script src="https://kit.fontawesome.com/421d417066.js" crossorigin="anonymous"></script> 
<div class="block"> 
    <div class="bl-right">Lorem ipsum dolor.</div> 
</div>

Javascript 
 
// описываем каждый из элементов контрола 
// не забываем про ресайз окна window.on('resize', function(){}); 
// не забываем про touch события для моб. устройств touchEvents (touchStart, touchEnd, touchMove)

Css 
 
.scrollbar {overflow: hidden; height: статическое значение в px} // убираем нативный скролл 
.scroll-area {overflow-y: scroll; max-height: 100%;}

 HTML 
 
<div class="scrollbar"> 
  <div class="scroll-area"> 
    <nav role="navigation"> 
      <ul> 
        <li></li> 
        <li></li> 
        <li></li> 
      </ul> 
    </nav> 
 
    <div class="scroll-controls"> 
      <span class="c-arr-top"></span> 
      <span class="c-drag"></span> 
      <span class="c-arr-bottom"></span> 
    </div> 
  </div>   
</div>