Adding Arrows to Scrollbar

How to add arrows with -webkit-scrollbar-button

(Super late to the party, but still)

You can style scrollbar buttons using ::-webkit-scrollbar-button selector (see this blog post for a full breakdown on the webkit scrollbar pseudo selectors), but getting them to show arrows is much trickier, and most people seem to either use background images or skip buttons altogether.

Here's a solution using CSS triangles for arrows:

https://stackoverflow.com/a/46229219/1202275

and another one (based on the one above, vertical scrollbar only but the idea is the same):

::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

(https://codepen.io/DarthVeyda/pen/eLLbXa)

Adding arrows to scrollbar

I've been playing around with it for you.
First I set the buttons to be 10px x 10px to make it easier, and created 4 10 by 10 arrows pointing left, right, up and down.
Then I set the background-size to be 100%, to scale it correctly.
Then i set the correct image to each button using, the :increment, :decrement, :horizontal and :vertical selectors.
The images are on my public dropbox right now, but you can add your own.

Here's the updated code: http://jsfiddle.net/Nk3NH/2/

the code I wrote was this:

::-webkit-scrollbar-button {
    background-size: 100%;
    height: 10px;
    width: 10px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon2.png);
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon4.png);
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon3.png);
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon.png);
}

EDIT:
Managed to get the scroll buttons next to each other as OP wanted by adding these styles:

::-webkit-scrollbar-button:end {
    display: block;
}

::-webkit-scrollbar-button:start {
    display: none;
}

http://jsfiddle.net/Nk3NH/4/

Updated code with base64 images instead of broken links:

http://jsfiddle.net/burkybang/1z7vgfpt/

Hide scrollbar and add arrows instead

You can hide the scroll bar with webkit-scrollbar and scrollbar-width CSS. Additionally, you can use some simple javascript selectors to "slide" a div when buttons are pressed, as demonstrated in the example below:

var button = document.getElementById('slide');button.onclick = function () {    var container = document.getElementById('container');    sideScroll(container,'right',25,100,10);};
var back = document.getElementById('slideBack');back.onclick = function () {    var container = document.getElementById('container');    sideScroll(container,'left',25,100,10);};
function sideScroll(element,direction,speed,distance,step){    scrollAmount = 0;    var slideTimer = setInterval(function(){        if(direction == 'left'){            element.scrollLeft -= step;        } else {            element.scrollLeft += step;        }        scrollAmount += step;        if(scrollAmount >= distance){            window.clearInterval(slideTimer);        }    }, speed);}

.scoll-pane {    width: 100%;    height: auto;    overflow: auto;    outline: none;    overflow-y: hidden;    padding-bottom: 15px;    -ms-overflow-style: scroll;  // IE 10+    scrollbar-width: none;  // Firefox}
ul {    display: flex;    list-style-type: none;    padding: 0;    margin: 0;}
img {    width: 300px;    height: 180px;}
  .scoll-pane::-webkit-scrollbar {   display: none;  // Safari and Chrome  }

<div class="container">  <div class="row">      <div class="col-12">          <div class="scoll-pane mt-4" id="container">              <ul class="photos">                  <li>                      <img src="https://robohash.org/test">                  </li>                  <li>                      <img src="https://robohash.org/test">                  </li>                  <li>                      <img src="https://robohash.org/test">                  </li>                  <li>                      <img src="https://robohash.org/test">                  </li>              </ul>          </div>      </div>  </div> </div><button id="slideBack" type="button">Prev</button><button id="slide" type="button">Next</button>   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Missing arrows on top and bottom of custom scrollbar track

for custom scrollbar tracker you need to add style ::-webkit-scrollbar-button pseudo element. like this.

div{max-width:150px;max-height:200px; overflow-y: scroll;  overflow-x: hidden;}div::-webkit-scrollbar {  width: 1em;}
div::-webkit-scrollbar-track {  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);  }  div::-webkit-scrollbar-thumb {  background-color: darkgrey;  outline: 1px solid slategrey;}
::-webkit-scrollbar-button {    background-color: red;    background-size: 10px 10px;    background-repeat: no-repeat;    background-position: center center;    height: 16px;    width: 1em;    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);}
::-webkit-scrollbar-button:horizontal:increment {    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon2.png);}
::-webkit-scrollbar-button:end:increment {    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQwNC4zMDggNDA0LjMwOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDA0LjMwOCA0MDQuMzA5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTAsMTAxLjA4aDQwNC4zMDhMMjAyLjE1MSwzMDMuMjI5TDAsMTAxLjA4eiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);} 
::-webkit-scrollbar-button:start:decrement {   background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC11cCI+CgkJPHBvbHlnb24gcG9pbnRzPSIwLDE5MS4yNSAxMjcuNSw2My43NSAyNTUsMTkxLjI1ICAgIiBmaWxsPSIjMDAwMDAwIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==)}

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<div>

Javascript arrow select + scrollbar

To prevent scrolling the page, you can use preventDefault, adding this code:

e.preventDefault();

And then, if you wish to scroll the page to selected element, you can use scrollIntoViewIfNeeded, putting the next code at the end of your listener:

if (liSelected) {
  liSelected.get(0).scrollIntoViewIfNeeded()
}

But be careful with scrollIntoViewIfNeeded, it's not supported by Firefox. You can use any polyfill (like this one). Or just skip this step adding the availability check:

if (liSelected && Element.prototype.scrollIntoViewIfNeeded) {...}