scroll indicator + circle arrows

by pj_js15

HTML

<div class="scroll-container">
  <ul class="scroll-content">
    <li><a href="#">Sample link 1</a></li>
    <li><a href="#">Sample link 2</a></li>
    <li><a href="#">Sample link 3</a></li>
    <li><a href="#">Sample link 4</a></li>
    <li><a href="#">Sample link5</a></li>
    <li><a href="#">Sample link6</a></li>
    <li><a href="#">Sample link7</a></li>
    <li><a href="#">Sample link8</a></li>
    <li><a href="#">Sample link9</a></li>
    <li><a href="#">Sample link</a></li>
    <li><a href="#">Sample link</a></li>
    <li><a href="#">Sample link</a></li>
  </ul>
  <div class="scroll-arrows">
    <button class="left-arrow" disabled>&lt;</button>
    <button class="right-arrow">&gt;</button>
  </div>
</div>

CSS

.scroll-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

.scroll-content {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.scroll-arrows {
  position: fixed;
  top: 10%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.left-arrow,
.right-arrow {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #000;
  opacity: 0.5;
  padding: 0 20px;
}

.left-arrow:hover,
.right-arrow:hover {
  cursor: pointer;
  opacity: 1;
}

.left-arrow[disabled],
.right-arrow[disabled] {
  opacity: 0.2;
  cursor: not-allowed;
}

.left-arrow {
  position: absolute;
    top: -50px;
    background: red;
    width: 20px;
}

.right-arrow {
  position: absolute;
  top: -50px;
  right: 0;
  background: red;
  width: 20px;

}

ul > li {
  min-width: 100px;
}

JavaScript

const scrollContainer = document.querySelector('.scroll-container');
const scrollContent = document.querySelector('.scroll-content');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');
const scrollStep = 200;

leftArrow.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: -scrollStep,
    behavior: 'smooth'
  });
});

rightArrow.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: scrollStep,
    behavior: 'smooth'
  });
});

scrollContainer.addEventListener('scroll', () => {
  if (scrollContainer.scrollLeft === 0) {
    leftArrow.disabled = true;
  } else {
    leftArrow.disabled = false;
  }

	console.log('scrollContent.scrollWidth: ', scrollContent.scrollWidth);
  console.log('scrollContainer.scrollLeft + scrollContainer.clientWidth', scrollContainer.scrollLeft + scrollContainer.clientWidth);
  if (scrollContainer.scrollLeft + scrollContainer.clientWidth > scrollContent.scrollWidth-1) {
    rightArrow.disabled = true;
  } else {
    rightArrow.disabled = false;
  }
});

//Math.round(1001/1000)*1000