Html – How to make a div move as a scrollbar

// 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>