如何左/右一一放置自定义滚动条按钮？

Question

问题

滚动条是通过图像实现的。
我参考以下内容制作了这样的滚动条。
参考以下，现在滚动条变成了这个样子。
参考站：
I want to make knob of input range an image - StackOverflowJP（日文站对不起..）
Implement scrollbar-button - JSFiddle

▼ 我想做这个：

• 指定scrollbar的宽度和高度大小
• scrollbar-button左/右一一
• 将scrollbar 定位在远离目标的位置

---

代码

▼ 除非是webkit 浏览器（例如 Chrome 等），否则可能无法正确显示

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;
 }

<div id="thumb-wrap">
   <ul>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075715.png" alt="あ=a" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075712.png" alt="い=b" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075710.png" alt="う=c" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075706.png" alt="え=d" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075704.png" alt="お=e" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075810.png" alt="か=f" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075807.png" alt="き=g" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075805.png" alt="く=h" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075802.png" alt="け=i" /></a>
     </li>
     <li>
       <a href="#"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075759.png" alt="こ=j" /></a>
     </li>
   </ul>
 </div>

Answer 1

这是我使用 CSS 和 JS 能做的最好的事情。它使用范围输入作为滑块

<input id="slider" type="range" min="1" max='100' value="0" step="1">

该值代表视图向左滚动的百分比:)

我找不到纯 CSS 解决方案

请看下面的演示

$(function() {
   // this just reads the initial value of the input and displays it on the span
  $("#position").text($("#slider").val());

   // this is an event handler.  The the slider changes it executes the function within
  $("#slider").on('change input', function() {

    // display the input value on the span (updates it)
    $("#position").text($(this).val());
    
    // calculate the new left position of the displayDiv by getting a percentage of the width
    // of the parent.
    // the idea here is that the range has a min value of 1 and a max of 100, they represent 
    // a percentage of pixels to move right or left.  So if I move the input/range slider to
    // have a value of 10, I mean to slide the displayDiv 10%.     
    // this means, 10% of the width of the wrapper (350px) which is 35px;
    var posLeft = $(this).val() * $("#wrapper").width() / 100;
    
    // set the new left position of the displayDiv with the calculated value
    $("#displayDiv li").css('left', -posLeft);
  });
});

#wrapper {
  
  overflow: hidden;
  width: 400px;
  white-space: no-wrap;
}

.nav {
  padding:0;
  margin:0;
  width: 400px;
  height: 210px;
  columns: 100px 100;
  column-gap: 1px;
  overflow: hidden;
}

.nav li {
  position: relative;
  list-style: none;
  display: inline-block;
  padding: 2px;
  margin: 0 auto;
  text-align: center;
  
}

input['range'] {
  margin: 0 auto;
  width: 100px;
}

#sliderDiv {
  text-align: center;
  width: 350px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <ul id="displayDiv" class="nav">
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
    <li>
      <img src="http://placekitten.com/100/200" />
    </li>
  </ul>
</div>
<div id="sliderDiv">
  <input id="slider" type="range" min="1" max='100' value="0" step="1">
</div>
Position: <span id="position"></span> %