I am working on a scrollbar that would likely display sub-categories of different things. e.g Shoes, Clothes etc. Is there a way where I can make the scrollbar move on its own when you hover over arrows (from left to right and vice versa depending on direction of arrow). If possible I would like to use Vanilla JS

```css
.collections-nav {
  white-space: nowrap;
  overflow-x: auto;
  display: flex;
  gap: 15px;
  padding-left: 0rem;
  margin-top: 2rem;
  padding-bottom: 1.5rem;
}

.collections-nav li {
  background: #FFF;
  border-radius: 50px;
  padding: 7px 20px;
  font-size: 0.75rem;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%);
  font-family: 'Open-Bold', sans-serif;
  color: #0A2540;
  list-style-type: none;
  cursor: pointer;
}

.collections-nav li:hover {
  background: #0a2540;
  opacity: 0.95;
  transition: 0.3s ease-in-out;
  color: #FFF;
}

.collections-nav .active {
  background: #0A2540;
  color: #FFF;
}

.collections-nav::-webkit-scrollbar {
  height: 7px !important;
  /* width of the entire scrollbar */
}

.collections-nav::-webkit-scrollbar-track {
  background: #F6F9FC;
  /* color of the tracking area */
  border-radius: 10px;
}

.collections-nav::-webkit-scrollbar-thumb {
  background-color: #0A2540;
  /* color of the scroll thumb */
  border-radius: 10px;
}
```

```html
<div class="collections">
  <ul class="collections-nav nav-tabs pb-3">
    <li class="active">Home</li>
    <li>Profile</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
  </ul>
</div>
```