title: positioning webkit-scrollbar absolute and vertically center
body: <p>I want to make responsive menu. On mobile I want to allow a scrollable menu, and I need to make it with default scrollbar. I want these scroll arrows make vertically centered on my menu, but I dont know how. There's my <a href="https://jsfiddle.net/eatmailyo/ofjwe6jp/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a> (green and red is arrows, what I replace with images)</p>
  
  <p>There is my webkit-scrollbar CSS</p>
  
  <pre><code>#page .page-nav::-webkit-scrollbar{    
     -webkit-appearance: none;
     background: transparent;
     z-index: 300;
  }
  
  #page .page-nav::-webkit-scrollbar-button{}
  
  #page .page-nav::-webkit-scrollbar-button:increment{
     background: red;
  }
  
  #page .page-nav::-webkit-scrollbar-button:decrement{
     background: green;
  }
  </code></pre>