Html - How to make a div move as a scrollbar

Luna
August 21, 2024
79 views
0 votes
2 Answers

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 10px;
  margin-top: 10px;
  color: white;
}

html,
body {
  max-width: 100vw;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-color: #465071 #587bbe;
  font-family: "Verdana", sans-serif;
  font-size: 10px;
  background-color: #cccccc;
  color: black;
  cursor: default;
}

#paintbox {
  display: inline-block;
  position: absolute;
  max-width: 900px;
  max-height: 600px;
  border-right: grey 1px solid;
  outline: white 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px #dedfde solid;
  border-left: 1px #dedfde solid;
  border-bottom: 1px black solid;
  background-color: #bdbebd;
  z-index: 9;
  top: 10px;
  left: 0;
}

.resizable {
  overflow: hidden;
  resize: both;
  min-width: 750px;
  min-height: 517px;
}

#paintboxwindowtitle {
  display: block;
  position: absolute;
  width: 99%;
  height: 18px;
  top: 3px;
  left: 3px;
  background-color: #00007b;
  cursor: move;
  z-index: 10;
}

#paintboxwindowtitle p {
  margin-top: -3px;
  margin-bottom: 10px;
  margin-left: 1px;
  font-size: 19px;
  color: white;
  font-family: "dia";
  letter-spacing: 0.25px;
}

#paintboxwindowtitle img {
  margin-bottom: 0;
  margin-left: 1px;
  margin-right: 3px;
}

.minmaxclose {
  display: block;
  position: absolute;
  width: 75px;
  height: 18px;
  top: 3px;
  right: 3px;
  background-color: #000082;
  z-index: 11;
}

.buttonclose {
  display: block;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px white solid;
  border-left: 1px white solid;
  border-bottom: 1px black solid;
  text-align: center;
}

.buttonclose:active {
  display: block;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
}

.buttonmax {
  display: block;
  position: absolute;
  top: 2px;
  right: 20px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px white solid;
  border-left: 1px white solid;
  border-bottom: 1px black solid;
  text-align: center;
  font-family: "Arial";
}

.buttonmax:active {
  display: block;
  position: absolute;
  top: 2px;
  right: 20px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
  font-family: "Arial";
}

.buttonmin {
  display: block;
  position: absolute;
  top: 2px;
  right: 36px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px white solid;
  border-left: 1px white solid;
  border-bottom: 1px black solid;
  text-align: center;
}

.buttonmin:active {
  display: block;
  position: absolute;
  top: 2px;
  right: 36px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
}

.buttonclose p {
  color: black;
  margin-top: -1px;
  margin-right: 0;
  font-size: 8px;
  text-align: center;
  font-family: "pixelsansserif";
}

.buttonmax p,
.buttonmin p {
  color: black;
  margin-top: -7px;
  margin-left: 0;
  font-size: 13px;
  text-align: center;
  font-family: "pixelsansserif";
}

.filetab {
  display: block;
  position: absolute;
  width: 100%;
  height: 20px;
  top: 24px;
  margin-left: 9px;
}

.filetab a {
  margin-right: 9px;
  color: black;
  text-decoration: none;
  font-family: "w95a";
  font-size: 12px;
  letter-spacing: 0.35px;
}

.paintinner {
  display: block;
  position: absolute;
  top: 41px;
}

.canvas {
  display: block;
  position: relative;
  min-width: 600px;
  left: 4px;
  max-height: 400px;
  outline: black 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px #7b7b7b solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px #7b7b7b solid;
  background-color: white;
  color: black;
  margin-right: 7px;
  overflow: hidden;
  box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}

.canvastext {
  left: 0;
  top: 0;
  padding-left: 5px;
  padding-bottom: 25px;
  padding-right: 20px;
  margin-top: 4px;
  min-width: 600px;
  max-height: 400px;
  font-family: "w95a";
  font-size: 1.5em;
  overflow: scroll;
  text-align: justify;
}

.canvastext p {
  color: black;
  text-align: justify;
  margin-top: 4px;
}

.scrollbarvertical {
  display: block;
  position: absolute;
  float: right;
  width: 16px;
  height: calc(100% - 18px);
  top: 2px;
  right: 1px;
  border-bottom: black 1px solid;
  background-color: #bdbebd;
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}

.scrollbarhorizontal {
  display: block;
  position: absolute;
  width: calc(100% - 18px);
  height: 16px;
  bottom: 1px;
  margin-left: 2px;
  margin-right: 16px;
  border-right: black 1px solid;
  background-color: #bdbebd;
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}

.scrollblock {
  display: block;
  position: absolute;
  right: 0;
  width: 16px;
  height: 16px;
  background-color: #bdbebd;
  bottom: 0;
}

.buttonscrollbarup {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 15px;
  background-color: #bdbebd;
  border-left: #dedfde 1px solid;
  border-right: black 1px solid;
  border-bottom: none;
  border-top: #dedfde 1px solid;
  text-align: center;
  left: 0;
  top: 0;
  box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}

.buttonscrollbardown {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 15px;
  background-color: #bdbebd;
  border-left: #dedfde 1px solid;
  border-right: black 1px solid;
  border-bottom: none;
  border-top: #dedfde 1px solid;
  text-align: center;
  left: 0;
  bottom: 0;
  box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}

.buttonscrollbarupdown {
  display: inline-block;
  position: relative;
  width: 16px;
  min-height: 147px;
  background-color: #bdbebd;
  border-left: #dedfde 1px solid;
  border-right: black 1px solid;
  border-bottom: black 1px solid;
  border-top: black 1px solid;
  text-align: center;
  left: 0;
  top: -1px;
  box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}

.buttonscrollbarleft {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 16px;
  background-color: #bdbebd;
  border-left: #dedfde 1px solid;
  border-right: none;
  border-bottom: 1px black solid;
  border-top: #dedfde 1px solid;
  text-align: center;
  left: 0;
  top: 0;
  box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}

.buttonscrollbarright {
  display: inline-block;
  position: absolute;
  width: 15px;
  height: 16px;
  background-color: #bdbebd;
  border-left: #dedfde 1px solid;
  border-right: none;
  border-bottom: 1px black solid;
  border-top: #dedfde 1px solid;
  text-align: center;
  right: 0;
  top: 0;
  box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}

.buttonscrollbarsidetoside {
  display: inline-block;
  position: relative;
  width: 345px;
  height: 16px;
  background-color: #bdbebd;
  border-left: 1px black solid;
  border-right: 1px black solid;
  border-bottom: 1px black solid;
  border-top: #dedfde 1px solid;
  left: -4px;
  top: -6px;
  box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}

.buttonscrollbarup:active {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 15px;
  background-color: #bdbebd;
  border-right: #7b7b7b 1px solid;
  outline: #cccccc 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
  left: 0;
  top: 0;
}

.buttonscrollbardown:active {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 15px;
  background-color: #bdbebd;
  border-right: #7b7b7b 1px solid;
  outline: #cccccc 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
  left: 0;
  bottom: 0;
}

.buttonscrollbarupdown:active {
  display: inline-block;
  position: relative;
  width: 16px;
  min-height: 147px;
  background-color: #bdbebd;
  border-right: #7b7b7b 1px solid;
  outline: #cccccc 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  left: 0;
  bottom: 0;
}

.buttonscrollbarleft:active {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 16px;
  background-color: #bdbebd;
  border-right: #7b7b7b 1px solid;
  outline: #cccccc 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
  left: 0;
  top: 0;
}

.buttonscrollbarright:active {
  display: inline-block;
  position: absolute;
  width: 15px;
  height: 16px;
  background-color: #bdbebd;
  border-right: #7b7b7b 1px solid;
  outline: #cccccc 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
  right: 0;
  top: 0;
}

.buttonscrollbarsidetoside:active {
  display: inline-block;
  position: relative;
  width: 345px;
  height: 16px;
  background-color: #bdbebd;
  border-right: #7b7b7b 1px solid;
  outline: #cccccc 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  left: -4px;
  top: -6px;
}

.buttonscrollbarup img,
.buttonscrollbardown img {
  font-family: "w95a";
  margin-bottom: 3px;
  text-align: center;
}

.buttonscrollbarleft img,
.buttonscrollbarright img {
  font-family: "w95a";
  margin-bottom: 2px;
  text-align: center;
}


.clear {
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 600px;
  right: 0;
  top: 0;
  background-color: #bdbebd;
  z-index: 99;
}

   <section id="content">
   <div id="paintbox" class="resizable">
   <div id="paintboxwindowtitle">
  <p><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/paint%2016x16.gif">untitled - Paint</p>
   </div>
   <div class="minmaxclose">
  <button class="buttonclose">
     <p>X</p>
  </button>
  <button class="buttonmax">
     <p>🗖</p>
  </button>
  <button class="buttonmin">
     <p>🗕</p>
  </button>
   </div>
   <div class="filetab"></div>
   <div class="paintinner">
   <div class="clear"></div>
   <div class="itemchooser">
  <div class="underinset"></div>
   </div>
   <div class="canvas">
  <div class="canvastext">
     <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Massa suscipit facilisi odio sem id dictum senectus. Maecenas eu consectetur tempus commodo integer lacus. Maecenas primis pulvinar inceptos sapien rhoncus lobortis tempus. Nisi curabitur consectetur hac mus rhoncus consectetur pulvinar. Mollis lacinia erat; pharetra dignissim parturient elementum. Platea phasellus nostra sapien tempus aptent vulputate augue.</p>
     <p>Urna praesent aenean interdum habitasse sed ante. Aliquam quam eros metus dictumst; dis curabitur sed. Porta nisi nisi vestibulum; sagittis porttitor risus. Erat turpis nunc hendrerit litora nascetur fames. Nascetur integer mi ullamcorper sociosqu viverra. Aenean litora ornare suscipit donec maximus elit. Phasellus aptent mollis inceptos nullam tempor cras gravida facilisis. Fusce eget commodo luctus vel sed nascetur lacus consequat sapien. Etiam ligula taciti etiam venenatis risus.</p>
     <p>Nisl tortor platea elementum eu dolor. Imperdiet efficitur enim etiam nam purus dis donec erat. Mattis ante hac etiam tempus aptent lacinia luctus turpis. Neque ridiculus efficitur nullam magna interdum purus faucibus. Consectetur pulvinar augue ultrices, per imperdiet magna habitasse ligula. Facilisis dictum laoreet litora eu tincidunt.</p>
     <p>Facilisi porttitor fringilla magnis vestibulum molestie. Suscipit a ac, nullam hac purus facilisis senectus. Condimentum ut nostra hendrerit fames nascetur elit nunc consequat? Porttitor est laoreet eleifend eleifend dapibus placerat torquent ante purus. Congue auctor orci at mi vulputate felis vestibulum orci felis. Vel mattis nunc tempor magna fusce nostra. Ligula varius habitasse rutrum nostra ad nec. Sapien facilisi dignissim pretium euismod placerat pharetra.</p>
     <p>Porttitor fames integer est pulvinar vivamus facilisis facilisi fringilla. Dolor gravida ex sit sem morbi. Quam class venenatis lorem; adipiscing habitasse cubilia quam. Vitae ad curabitur diam mollis mattis ut inceptos lorem ornare. Posuere eu faucibus facilisis ut commodo quisque himenaeos. Integer metus eros risus arcu fusce gravida, accumsan ultricies nunc. Nulla sociosqu lectus donec fusce dictumst tempus, tempus sagittis.</p>
     <p>Magna nostra sit ut sem pulvinar porttitor ridiculus. Varius velit suspendisse elit hendrerit enim feugiat nam. Parturient mollis torquent sociosqu suspendisse faucibus sodales nulla. Iaculis mus aliquet dapibus magnis fames; cras ultricies facilisi. Vehicula montes gravida pulvinar congue ante. Nibh ridiculus consequat fusce quis ullamcorper a augue aliquam imperdiet. Lorem suscipit massa et erat sem eget. Blandit scelerisque himenaeos pulvinar cubilia nunc sociosqu morbi. Suspendisse cras etiam nec potenti, ultrices ipsum porta.</p>
     <p>Nisi vel nostra pharetra nisi venenatis tincidunt non mauris. Rutrum per fermentum sollicitudin mollis pharetra pulvinar tincidunt erat. Convallis consequat quis taciti phasellus, conubia bibendum erat vehicula. Litora habitant nullam vestibulum nunc gravida volutpat integer lobortis. Leo nibh faucibus cubilia tempus cursus fringilla convallis metus. Metus viverra senectus tortor erat phasellus.</p>
     <p>Curae tincidunt orci placerat sem ad. Enim libero malesuada eget leo vitae ex. Velit efficitur luctus faucibus faucibus rutrum. Quam tincidunt odio himenaeos conubia penatibus. Taciti commodo varius tellus tristique; hac scelerisque. Tempor potenti ex diam duis sed quam. Imperdiet inceptos massa ridiculus eget nec quisque dignissim potenti parturient.</p>
     <p>Sagittis maximus turpis quisque rutrum nostra natoque ipsum. Fringilla aliquam luctus curabitur; vehicula vivamus cras lobortis. Facilisis nullam neque dictum vehicula metus adipiscing. Dolor senectus lacinia rhoncus etiam fermentum. Varius netus viverra curae sem fringilla rutrum fringilla mollis. Auctor interdum quisque vel cras litora.</p>
     <p>Nostra litora potenti, amet erat vehicula proin lacinia. Ac dis lectus; turpis quisque eleifend sollicitudin vulputate curae. Aenean libero volutpat habitasse ullamcorper dis aliquam malesuada torquent aliquam. Nulla viverra nostra bibendum suspendisse cursus facilisis. Pellentesque tellus conubia viverra praesent lacinia. Rhoncus curae porta nam tristique taciti. Eu potenti congue, amet gravida felis facilisi nisi cubilia. Pellentesque gravida blandit felis proin luctus suscipit primis hendrerit.</p>
     <div class="scrollblock"></div>
     <!-- SCROLLBLOCK -->
     <div class="scrollbarvertical">
        <button class="buttonscrollbarup"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/up%20arrow.png"></button>
        <button class="buttonscrollbarupdown"></button>
        <button class="buttonscrollbardown"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/down%20arrow.png"></button>
     </div>
     <!-- SCROLLBAR VERT -->
     <div class="scrollbarhorizontal">
        <button class="buttonscrollbarleft"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/left%20arrow.png"></button>
        <button class="buttonscrollbarsidetoside"></button>
        <button class="buttonscrollbarright"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png"></button>
     </div>
     <!-- SCROLLBAR HORI -->
  </div>
   </div>
</section>

I’m currently working on making a website layout that looks like the Window95 desktop with the paint window as the main window for content, and I’m trying to finish up the last (at least, I hope it’s the last…) JavaScript element and I truly have NO idea what I’m doing. What I want is for the scrolling part of the scrollbar I’ve made to, well…scroll. I’ve got the buttons for it working just fine, but the actual scrolling part is a different story. I think I’d need to use mouse events (mouseup, mousedown, and mousemove), something for the wheel aspect, as well as have the scrollbar move the actual content the way a regular scrollbar does, but I have no understanding of how to make it work 🙁 I’ve searched DOZENS of different search terms to try and find a similar problem, but I just don’t think most people want to make custom scrollbars anymore so I’ve found NOTHING that can help me.

I don’t know JavaScript at all and am really, really struggling with getting what I want to work.

I have a codepen here showing my layout so far, so I hope you can see what I’m working with. None of my scripts seem to be working in the link and I’m not sure why, but since I don’t have a script yet I’ve tried out, maybe that’s not a big deal?

I asked this question on Reddit and got a lot of responses to making a custom cursor using scrollbar-color and scrollbar-width, but to be clear that doesn’t fix my problem. What I want is to use JavaScript to make a div scroll up and down, while it also moves the content as it scrolls. I will input the code below of my coding for the scrollbar and it’s direct parent that I’m trying to make.

.scrollbarvertical {
display: block;
position: absolute;
float: right;
width: 16px;
height: calc(100% - 18px);
top: 2px;
right: 1px;
border-bottom: black 1px solid;
background-color: #bdbebd;
background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}
.buttonscrollbarupdown {
display: inline-block;
position: relative;
width: 16px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: black 1px solid;
border-top: black 1px solid;
text-align: center;
left: 0;
top: -1px;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}

Any help is greatly appreciated!!!

I’ve tried multiple different draggable scripts but none of them do what I want as I don’t want a simple draggable script, but one in which the draggable object also scrolls a text box I’ve created.

Answers

Can you try the code below?

I arbitrarily used the pre tag to test the horizontal scrolling.

Adjust the width and scope of the scroll bar yourself.

Javascript is responsible for the dynamic part of the web.

If you’ve built a skeleton with HTML and made it pretty with CSS, you should use Javascript to make it moveable.

It’s normal not to know at first.
It’s going to be uncomfortable, painful, and upsetting.
But it’s really cool after you solve it, right?

// Element selections
const scrollArea = document.querySelector('.canvastext');
const scrollBarVertical = document.querySelector('.scrollbarvertical');
const scrollBarHorizontal = document.querySelector('.scrollbarhorizontal');
const scrollBarVerticalHandle = scrollBarVertical.querySelector('.buttonscrollbarupdown');
const scrollBarHorizontalHandle = scrollBarHorizontal.querySelector('.buttonscrollbarsidetoside');
const buttonScrollUp = document.querySelector('.buttonscrollbarup');
const buttonScrollDown = document.querySelector('.buttonscrollbardown');
const buttonScrollLeft = document.querySelector('.buttonscrollbarleft');
const buttonScrollRight = document.querySelector('.buttonscrollbarright');

const rightButtonWidth = 15; // Width of the right button on horizontal scrollbar
const rightButtonMargin = 16; // Margin between the right button and scrollbar on horizontal scrollbar
const bottomButtonHeight = 32; // Height of the bottom button on vertical scrollbar
const bottomButtonMargin = 16; // Margin between the bottom button and scrollbar on vertical scrollbar

// Scroll ratio settings
const scrollRatio = 0.1; // Scroll amount as a percentage (10%)

// Synchronize custom scrollbars with the scroll area
function updateCustomScrollbars() {
  const scrollTop = scrollArea.scrollTop;
  const scrollLeft = scrollArea.scrollLeft;
  const scrollHeight = scrollArea.scrollHeight;
  const scrollWidth = scrollArea.scrollWidth;
  const clientHeight = scrollArea.clientHeight;
  const clientWidth = scrollArea.clientWidth;

  // Calculate vertical scrollbar handle size and position
  const verticalHandleHeight = Math.max((clientHeight / scrollHeight) * (scrollBarVertical.clientHeight - bottomButtonHeight - bottomButtonMargin), 30); // Minimum height 30px
  const verticalScrollRatio = scrollTop / (scrollHeight - clientHeight);
  scrollBarVerticalHandle.style.height = `${verticalHandleHeight}px`;
  scrollBarVerticalHandle.style.top = `${Math.min(verticalScrollRatio * (scrollBarVertical.clientHeight - verticalHandleHeight - bottomButtonHeight - bottomButtonMargin), scrollBarVertical.clientHeight - verticalHandleHeight - bottomButtonMargin)}px`;

  // Calculate horizontal scrollbar handle size and position
  const horizontalHandleWidth = Math.max((clientWidth / scrollWidth) * (scrollBarHorizontal.clientWidth - rightButtonWidth - rightButtonMargin), 30); // Minimum width 30px
  const horizontalScrollRatio = scrollLeft / (scrollWidth - clientWidth);
  scrollBarHorizontalHandle.style.width = `${horizontalHandleWidth}px`;
  scrollBarHorizontalHandle.style.left = `${Math.min(horizontalScrollRatio * (scrollBarHorizontal.clientWidth - horizontalHandleWidth - rightButtonWidth - rightButtonMargin), scrollBarHorizontal.clientWidth - horizontalHandleWidth - rightButtonWidth - rightButtonMargin)}px`;
}

// Update custom scrollbars when scrolling
scrollArea.addEventListener('scroll', updateCustomScrollbars);

// Handle dragging of custom scrollbars
function onDragStart(event, axis) {
  event.preventDefault();
  const startX = event.clientX;
  const startY = event.clientY;
  const startScrollTop = scrollArea.scrollTop;
  const startScrollLeft = scrollArea.scrollLeft;

  function onDragMove(moveEvent) {
    const deltaX = moveEvent.clientX - startX;
    const deltaY = moveEvent.clientY - startY;

    if (axis === 'vertical') {
      const maxScrollTop = scrollArea.scrollHeight - scrollArea.clientHeight;
      const handleHeight = scrollBarVerticalHandle.clientHeight;
      const scrollTop = startScrollTop + (deltaY / (scrollBarVertical.clientHeight - handleHeight - bottomButtonHeight - bottomButtonMargin)) * maxScrollTop;
      scrollArea.scrollTop = Math.min(Math.max(scrollTop, 0), maxScrollTop);
    } else if (axis === 'horizontal') {
      const maxScrollLeft = scrollArea.scrollWidth - scrollArea.clientWidth;
      const handleWidth = scrollBarHorizontalHandle.clientWidth;
      const scrollLeft = startScrollLeft + (deltaX / (scrollBarHorizontal.clientWidth - handleWidth - rightButtonWidth - rightButtonMargin)) * maxScrollLeft;
      scrollArea.scrollLeft = Math.min(Math.max(scrollLeft, 0), maxScrollLeft);
    }
    updateCustomScrollbars();
  }

  function onDragEnd() {
    document.removeEventListener('mousemove', onDragMove);
    document.removeEventListener('mouseup', onDragEnd);
  }

  document.addEventListener('mousemove', onDragMove);
  document.addEventListener('mouseup', onDragEnd);
}

// Add drag functionality to custom scrollbars
scrollBarVerticalHandle.addEventListener('mousedown', (event) => onDragStart(event, 'vertical'));
scrollBarHorizontalHandle.addEventListener('mousedown', (event) => onDragStart(event, 'horizontal'));

// Update scrollbar positions initially
updateCustomScrollbars();

// Scroll by a set ratio when buttons are clicked
function scrollByRatio(axis, direction) {
  const maxScroll = axis === 'vertical' ? scrollArea.scrollHeight - scrollArea.clientHeight : scrollArea.scrollWidth - scrollArea.clientWidth;
  const scrollAmount = maxScroll * scrollRatio;

  if (axis === 'vertical') {
    if (direction === 'up') {
      scrollArea.scrollTop = Math.max(scrollArea.scrollTop - scrollAmount, 0);
    } else if (direction === 'down') {
      scrollArea.scrollTop = Math.min(scrollArea.scrollTop + scrollAmount, maxScroll);
    }
  } else if (axis === 'horizontal') {
    if (direction === 'left') {
      scrollArea.scrollLeft = Math.max(scrollArea.scrollLeft - scrollAmount, 0);
    } else if (direction === 'right') {
      scrollArea.scrollLeft = Math.min(scrollArea.scrollLeft + scrollAmount, maxScroll);
    }
  }
  updateCustomScrollbars();
}

// Add click events to scrollbar buttons
buttonScrollUp.addEventListener('click', () => scrollByRatio('vertical', 'up'));
buttonScrollDown.addEventListener('click', () => scrollByRatio('vertical', 'down'));
buttonScrollLeft.addEventListener('click', () => scrollByRatio('horizontal', 'left'));
buttonScrollRight.addEventListener('click', () => scrollByRatio('horizontal', 'right'));

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 10px;
  margin-top: 10px;
  color: white;
}

html,
body {
  max-width: 100vw;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-color: #465071 #587bbe;
  font-family: "Verdana", sans-serif;
  font-size: 10px;
  background-color: #cccccc;
  color: black;
  cursor: default;
}

#paintbox {
  display: inline-block;
  position: absolute;
  max-width: 900px;
  max-height: 600px;
  border-right: grey 1px solid;
  outline: white 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px #dedfde solid;
  border-left: 1px #dedfde solid;
  border-bottom: 1px black solid;
  background-color: #bdbebd;
  z-index: 9;
  top: 10px;
  left: 0;
}

.resizable {
  overflow: hidden;
  resize: both;
  min-width: 750px;
  min-height: 517px;
}

#paintboxwindowtitle {
  display: block;
  position: absolute;
  width: 99%;
  height: 18px;
  top: 3px;
  left: 3px;
  background-color: #00007b;
  cursor: move;
  z-index: 10;
}

#paintboxwindowtitle p {
  margin-top: -3px;
  margin-bottom: 10px;
  margin-left: 1px;
  font-size: 19px;
  color: white;
  font-family: "dia";
  letter-spacing: 0.25px;
}

#paintboxwindowtitle img {
  margin-bottom: 0;
  margin-left: 1px;
  margin-right: 3px;
}

.minmaxclose {
  display: block;
  position: absolute;
  width: 75px;
  height: 18px;
  top: 3px;
  right: 3px;
  background-color: #000082;
  z-index: 11;
}

.buttonclose {
  display: block;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px white solid;
  border-left: 1px white solid;
  border-bottom: 1px black solid;
  text-align: center;
}

.buttonclose:active {
  display: block;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
}

.buttonmax {
  display: block;
  position: absolute;
  top: 2px;
  right: 20px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px white solid;
  border-left: 1px white solid;
  border-bottom: 1px black solid;
  text-align: center;
  font-family: "Arial";
}

.buttonmax:active {
  display: block;
  position: absolute;
  top: 2px;
  right: 20px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
  font-family: "Arial";
}

.buttonmin {
  display: block;
  position: absolute;
  top: 2px;
  right: 36px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: outset;
  outline-offset: -2px;
  border-right: 1px black solid;
  border-top: 1px white solid;
  border-left: 1px white solid;
  border-bottom: 1px black solid;
  text-align: center;
}

.buttonmin:active {
  display: block;
  position: absolute;
  top: 2px;
  right: 36px;
  width: 16px;
  height: 14px;
  background-color: #bdbebd;
  border-right: grey 1px solid;
  outline: #dfdfdf 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px black solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px black solid;
  text-align: center;
}

.buttonclose p {
  color: black;
  margin-top: -1px;
  margin-right: 0;
  font-size: 8px;
  text-align: center;
  font-family: "pixelsansserif";
}

.buttonmax p,
.buttonmin p {
  color: black;
  margin-top: -7px;
  margin-left: 0;
  font-size: 13px;
  text-align: center;
  font-family: "pixelsansserif";
}

.filetab {
  display: block;
  position: absolute;
  width: 100%;
  height: 20px;
  top: 24px;
  margin-left: 9px;
}

.filetab a {
  margin-right: 9px;
  color: black;
  text-decoration: none;
  font-family: "w95a";
  font-size: 12px;
  letter-spacing: 0.35px;
}

.paintinner {
  width: 100%;
  display: block;
  position: absolute;
  top: 41px;
}

.canvas {
  display: block;
  position: relative;
  min-width: 600px;
  left: 4px;
  max-height: 400px;
  outline: black 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px #7b7b7b solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px #7b7b7b solid;
  background-color: white;
  color: black;
  margin-right: 7px;
  overflow: hidden;
  box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}

.canvastext {
  left: 0;
  top: 0;
  padding-left: 5px;
  padding-bottom: 25px;
  padding-right: 20px;
  margin-top: 4px;
  min-width: 600px;
  max-height: 400px;
  font-family: "w95a";
  font-size: 1.5em;
  overflow: scroll;
  text-align: justify;
}

.canvastext p {
  color: black;
  text-align: justify;
  margin-top: 4px;
}

.scrollbarvertical {
display: block;
position: absolute;
float: right;
width: 16px;
height: calc(100% - 18px);
top: 2px;
right: 1px;
border-bottom: black 1px solid;
background-color: #bdbebd;
background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}
.scrollbarhorizontal {
display: block;
position: absolute;
width: calc(100% - 18px);
height: 16px;
bottom: 1px;
margin-left: 2px;
margin-right: 16px;
border-right: black 1px solid;
background-color: #bdbebd;
background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}
.scrollblock {
display: block;
position: absolute;
right: 0;
width: 16px;
height: 16px;
background-color: #bdbebd;
bottom: 0;
}
.buttonscrollbarup {
display: inline-block;
position: relative;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: none;
border-top: #dedfde 1px solid;
text-align: center;
left: 0;
top: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbardown {
display: inline-block;
position: absolute;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: none;
border-top: #dedfde 1px solid;
text-align: center;
left: 0;
bottom: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarupdown {
display: inline-block;
position: relative;
width: 16px;
min-height: 147px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: black 1px solid;
border-top: black 1px solid;
text-align: center;
left: 0;
top: -1px;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarleft {
display: inline-block;
position: relative;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: none;
border-bottom: 1px black solid;
border-top: #dedfde 1px solid;
text-align: center;
left: 0;
top: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarright {
display: inline-block;
position: absolute;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: none;
border-bottom: 1px black solid;
border-top: #dedfde 1px solid;
text-align: center;
right: 0;
top: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarsidetoside {
display: inline-block;
position: relative;
width: 345px;
height: 16px;
background-color: #bdbebd;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
border-top: #dedfde 1px solid;
left: -4px;
top: -6px;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarup:active {
display: inline-block;
position: relative;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
left: 0;
top: 0;
}
.buttonscrollbardown:active {
display: inline-block;
position: absolute;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
left: 0;
bottom: 0;
}
.buttonscrollbarupdown:active {
display: inline-block;
position: relative;
width: 16px;
min-height: 147px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
left: 0;
bottom: 0;
}
.buttonscrollbarleft:active {
display: inline-block;
position: relative;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
left: 0;
top: 0;
}
.buttonscrollbarright:active {
display: inline-block;
position: absolute;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
right: 0;
top: 0;
}
.buttonscrollbarsidetoside:active {
display: inline-block;
position: relative;
width: 345px;
height: 16px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
left: 0;
top: -6px;
}
.buttonscrollbarup img, .buttonscrollbardown img {
font-family: "w95a";
margin-bottom: 3px;
text-align: center;
}
.buttonscrollbarleft img, .buttonscrollbarright img {
font-family: "w95a";
margin-bottom: 2px;
text-align: center;
}


.clear {
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 600px;
  right: 0;
  top: 0;
  background-color: #bdbebd;
  z-index: 99;
}

<section id="content">
  <div id="paintbox" class="resizable">
    <div id="paintboxwindowtitle">
      <p><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/paint%2016x16.gif">untitled - Paint</p>
    </div>
    <div class="minmaxclose">
      <button class="buttonclose"><p>X</p></button>
      <button class="buttonmax"><p>🗖</p></button>
      <button class="buttonmin"><p>🗕</p></button>
    </div>
    <div class="filetab"></div>
    <div class="paintinner">
      <div class="clear"></div>
      <div class="itemchooser">
        <div class="underinset"></div>
      </div>
      <div class="canvas">
        <div class="canvastext">
          <pre>Lorem ipsum odor amet, consectetuer adipiscing elit. Massa suscipit facilisi odio sem id dictum senectus. Maecenas eu consectetur tempus commodo integer lacus. Maecenas primis pulvinar inceptos sapien rhoncus lobortis tempus. Nisi curabitur
            consectetur hac mus rhoncus consectetur pulvinar. Mollis lacinia erat; pharetra dignissim parturient elementum. Platea phasellus nostra sapien tempus aptent vulputate augue.</pre>

          <p>Urna praesent aenean interdum habitasse sed ante. Aliquam quam eros metus dictumst; dis curabitur sed. Porta nisi nisi vestibulum; sagittis porttitor risus. Erat turpis nunc hendrerit litora nascetur fames. Nascetur integer mi ullamcorper sociosqu
            viverra. Aenean litora ornare suscipit donec maximus elit. Phasellus aptent mollis inceptos nullam tempor cras gravida facilisis. Fusce eget commodo luctus vel sed nascetur lacus consequat sapien. Etiam ligula taciti etiam venenatis risus.</p>

          <p>Nisl tortor platea elementum eu dolor. Imperdiet efficitur enim etiam nam purus dis donec erat. Mattis ante hac etiam tempus aptent lacinia luctus turpis. Neque ridiculus efficitur nullam magna interdum purus faucibus. Consectetur pulvinar augue
            ultrices, per imperdiet magna habitasse ligula. Facilisis dictum laoreet litora eu tincidunt.</p>

          <p>Facilisi porttitor fringilla magnis vestibulum molestie. Suscipit a ac, nullam hac purus facilisis senectus. Condimentum ut nostra hendrerit fames nascetur elit nunc consequat? Porttitor est laoreet eleifend eleifend dapibus placerat torquent
            ante purus. Congue auctor orci at mi vulputate felis vestibulum orci felis. Vel mattis nunc tempor magna fusce nostra. Ligula varius habitasse rutrum nostra ad nec. Sapien facilisi dignissim pretium euismod placerat pharetra.</p>

          <p>Porttitor fames integer est pulvinar vivamus facilisis facilisi fringilla. Dolor gravida ex sit sem morbi. Quam class venenatis lorem; adipiscing habitasse cubilia quam. Vitae ad curabitur diam mollis mattis ut inceptos lorem ornare. Posuere
            eu faucibus facilisis ut commodo quisque himenaeos. Integer metus eros risus arcu fusce gravida, accumsan ultricies nunc. Nulla sociosqu lectus donec fusce dictumst tempus, tempus sagittis.</p>

          <p>Magna nostra sit ut sem pulvinar porttitor ridiculus. Varius velit suspendisse elit hendrerit enim feugiat nam. Parturient mollis torquent sociosqu suspendisse faucibus sodales nulla. Iaculis mus aliquet dapibus magnis fames; cras ultricies
            facilisi. Vehicula montes gravida pulvinar congue ante. Nibh ridiculus consequat fusce quis ullamcorper a augue aliquam imperdiet. Lorem suscipit massa et erat sem eget. Blandit scelerisque himenaeos pulvinar cubilia nunc sociosqu morbi. Suspendisse
            cras etiam nec potenti, ultrices ipsum porta.</p>

          <p>Nisi vel nostra pharetra nisi venenatis tincidunt non mauris. Rutrum per fermentum sollicitudin mollis pharetra pulvinar tincidunt erat. Convallis consequat quis taciti phasellus, conubia bibendum erat vehicula. Litora habitant nullam vestibulum
            nunc gravida volutpat integer lobortis. Leo nibh faucibus cubilia tempus cursus fringilla convallis metus. Metus viverra senectus tortor erat phasellus.</p>

          <p>Curae tincidunt orci placerat sem ad. Enim libero malesuada eget leo vitae ex. Velit efficitur luctus faucibus faucibus rutrum. Quam tincidunt odio himenaeos conubia penatibus. Taciti commodo varius tellus tristique; hac scelerisque. Tempor
            potenti ex diam duis sed quam. Imperdiet inceptos massa ridiculus eget nec quisque dignissim potenti parturient.</p>

          <p>Sagittis maximus turpis quisque rutrum nostra natoque ipsum. Fringilla aliquam luctus curabitur; vehicula vivamus cras lobortis. Facilisis nullam neque dictum vehicula metus adipiscing. Dolor senectus lacinia rhoncus etiam fermentum. Varius
            netus viverra curae sem fringilla rutrum fringilla mollis. Auctor interdum quisque vel cras litora.</p>

          <p>Nostra litora potenti, amet erat vehicula proin lacinia. Ac dis lectus; turpis quisque eleifend sollicitudin vulputate curae. Aenean libero volutpat habitasse ullamcorper dis aliquam malesuada torquent aliquam. Nulla viverra nostra bibendum
            suspendisse cursus facilisis. Pellentesque tellus conubia viverra praesent lacinia. Rhoncus curae porta nam tristique taciti. Eu potenti congue, amet gravida felis facilisi nisi cubilia. Pellentesque gravida blandit felis proin luctus suscipit
            primis hendrerit.</p>
          <div class="scrollblock"></div>
          <!-- SCROLLBLOCK -->
          <div class="scrollbarvertical">
            <button class="buttonscrollbarup"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/up%20arrow.png"></button>
            <button class="buttonscrollbarupdown"></button>
            <button class="buttonscrollbardown"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/down%20arrow.png"></button>
          </div>
          <!-- SCROLLBAR VERT -->
          <div class="scrollbarhorizontal">
            <button class="buttonscrollbarleft"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/left%20arrow.png"></button>
            <button class="buttonscrollbarsidetoside"></button>
            <button class="buttonscrollbarright"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png"></button>
          </div>
          <!-- SCROLLBAR HORI -->
        </div>
      </div>

</section>

I’ve used Jquery customScroll before, and it’s fun working with javascript.
I didn’t know the reason for the ‘top: -6px’ on the horizontal scrollbar, but it was to match firefox.

Have you tried using webkit-scrollbar instead of creating the scrollbar from scratch? In my opinion, it might be easier. Here’s an example of how you could try doing it:

.canvastext::-webkit-scrollbar {
    width: 16px; 
    height: 16px; 
}

/* Fondo del track (la pista de la barra de desplazamiento) */
.canvastext::-webkit-scrollbar-track {
    background: #c0c0c0;
    border: 1px solid #f0f0f0; 
    box-shadow: inset -1px -1px 0px #808080; 
}

/* Parte que se mueve (pulgar) */
.canvastext::-webkit-scrollbar-thumb {
    background: #a0a0a0; 
    border: 1px solid #808080; 
    box-shadow: inset 1px 1px 0px #f0f0f0; 
}

/* Pulgar cuando se pasa el mouse por encima */
.canvastext::-webkit-scrollbar-thumb:hover {
    background: #808080;
}

/* Botones (flechas) del scrollbar */
.canvastext::-webkit-scrollbar-button {
    background: #c0c0c0; 
    border: 2px solid #f0f0f0; 
    box-shadow: inset -1px -1px 0px #808080;
    height: 16px; 
    width: 16px; 
}

/* Flecha arriba */
.canvastext::-webkit-scrollbar-button:single-button:vertical:decrement {
    background: #c0c0c0;
    border: 2px solid #f0f0f0;
    box-shadow: inset -1px -1px 0px #808080;
    mask-image: url('');
    mask-size: 10px;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Flecha abajo */
.canvastext::-webkit-scrollbar-button:single-button:vertical:increment {
    background: #c0c0c0;
    border: 2px solid #f0f0f0;
    box-shadow: inset -1px -1px 0px #808080;
    mask-image: url('');
    mask-size: 10px;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Flecha izquierda */
.canvastext::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background: #c0c0c0;
    border: 2px solid #f0f0f0;
    box-shadow: inset -1px -1px 0px #808080;
    mask-image: url('');
    mask-size: 10px;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Flecha derecha */
.canvastext::-webkit-scrollbar-button:single-button:horizontal:increment {
    background: #c0c0c0;
    border: 2px solid #f0f0f0;
    box-shadow: inset -1px -1px 0px #808080;
    mask-image: url('');
    mask-size: 10px;
    mask-repeat: no-repeat;
    mask-position: center;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make a div move as a scrollbar

Answers