How to place custom scrollbar buttons one by one left/right? - html

Question

Problem
Scroll bars are implemented with images.
I made the scroll bar like this with reference to the following.
With reference to the following, the scroll bar has become like this now.
Reference site:
I want to make knob of input range an image - StackOverflowJP (I'm sorry at the Japanese site..)
Implement scrollbar-button - JSFiddle
▼ I want to do this:
specify the width & height size of the scrollbar
scrollbar-button left / right one by one
position scrollbar at a distance away from target
Code
▼ Probably is not properly displayed unless it's a webkit browser (eg Chrome etc.)
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>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075715.png" alt="あ=a" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075712.png" alt="い=b" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075710.png" alt="う=c" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075706.png" alt="え=d" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075704.png" alt="お=e" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075810.png" alt="か=f" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075807.png" alt="き=g" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075805.png" alt="く=h" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075802.png" alt="け=i" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075759.png" alt="こ=j" />
</li>
</ul>
</div>

Answer 1

This is the best I could do using CSS and JS. It uses a range input as a slider
<input id="slider" type="range" min="1" max='100' value="0" step="1">
with the value representing the percentage of the view to scroll left :)
I could not find a pure-CSS solution
See demo below
$(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> %