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

Question

问题

滚动条通过图像实现。
我参考以下内容制作了滚动条。
参考以下内容，滚动条现在变得像这样。
参考网站：
我想使输入范围的旋钮成为图像-StackOverflowJP （对不起日本网站。）
实现滚动条按钮-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> %