title: How to place custom scrollbar buttons one by one left/right?
body: <h2>Problem</h2>
  
  <p>Scroll bars are implemented with images.<br>
  I made the scroll bar like this with reference to the following.<br>
  With reference to the following, the scroll bar has become like this now.<br>
  <a href="https://i.stack.imgur.com/ant0J.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ant0J.gif" alt="like this"></a>
  Reference site:<br>
  <a href="https://ja.stackoverflow.com/questions/19182/input-range%E3%81%AE%E3%81%A4%E3%81%BE%E3%81%BF%E3%82%92%E7%94%BB%E5%83%8F%E3%81%AB%E3%81%97%E3%81%9F%E3%81%84">I want to make knob of input range an image - StackOverflowJP</a> (I'm sorry at the Japanese site..)<br>
  <a href="http://jsfiddle.net/burkybang/1z7vgfpt/" rel="nofollow noreferrer">Implement scrollbar-button - JSFiddle</a></p>
  
  <p>▼ I want to do this:<br>
  <a href="https://i.stack.imgur.com/YqQ2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YqQ2k.png" alt="this"></a></p>
  
  <ul>
  <li>specify the width &amp; height size of the <code>scrollbar</code></li>
  <li><code>scrollbar-button</code> left / right one by one</li>
  <li>position <code>scrollbar</code> at a distance away from target</li>
  </ul>
  
  <hr>
  
  <h2>Code</h2>
  
  <p>▼ Probably is not properly displayed unless it's a <code>webkit</code> browser (eg Chrome etc.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {font-size: 62.5%;}
  
  #thumb-wrap {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 12.4rem;
    overflow-x: scroll;
    overflow-y: hidden;
    writing-mode: bt-lr;    /* IE */
    -webkit-appearance: none;
   }
  #thumb-wrap::-webkit-scrollbar {
    width: 33.2rem;
   }
  #thumb-wrap::-webkit-scrollbar-track {
    -webkit-appearance: none;
    width: 30.1rem;
    background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080150.png");
   }
  #thumb-wrap::-webkit-scrollbar-thumb {
    width: 1.5rem;
    height: 1.3rem;
    background: #fff;
    border: 1px solid #000;
   }
  #thumb-wrap::-webkit-scrollbar-button {
    width: 1.6rem;
    height: 1.6rem;
   }
  #thumb-wrap::-webkit-scrollbar-button:start {
    display: block;
   }
  #thumb-wrap::-webkit-scrollbar-button:horizontal:decrement {
    width: 1.6rem;
    height: 1.6rem;
    background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080158.png") no-repeat center center;
   }
  #thumb-wrap::-webkit-scrollbar-button:end {
    display: block;
   }
  #thumb-wrap::-webkit-scrollbar-button:horizontal:increment {
    width: 1.6rem;
    height: 1.6rem;
    background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080155.png") no-repeat center center;
   }
  #thumb-wrap ul {
    width: 100%;
    white-space: nowrap;
   }
  #thumb-wrap li {
    display: inline-block;
   }
  #thumb-wrap li:first-child {
    margin-left: 3rem;
   }
  #thumb-wrap li:last-child {
    margin-right: 3rem;
   }
  #thumb-wrap li + li {
    margin-left: 3rem;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="thumb-wrap"&gt;
     &lt;ul&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075715.png" alt="あ=a" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075712.png" alt="い=b" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075710.png" alt="う=c" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075706.png" alt="え=d" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075704.png" alt="お=e" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075810.png" alt="か=f" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075807.png" alt="き=g" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075805.png" alt="く=h" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075802.png" alt="け=i" /&gt;&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#"&gt;&lt;img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075759.png" alt="こ=j" /&gt;&lt;/a&gt;
       &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>