<div class="fake-content">
  Example of customizing webkit scrollbars using CSS →
</div>

$green: #18BC9B;

::-webkit-scrollbar {
  background: rgba($green, 0.2);
  height: 16px;
  width: 16px;

  &:disabled {
    background: transparent;
  }
}

::-webkit-scrollbar-track {
  height: 20px;
  width: 20px;
}

::-webkit-scrollbar-thumb {
  background: rgba($green, 0.6);
  border-radius: 20px;

  &:hover {
    background: rgba($green, 0.75);
  }

  &:active {
    background: rgba($green, 0.9);
  }
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba($green, 0.2);
}


.fake-content {
  height: 200vh;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  padding: 50px 20px;
  font-size: 20px;
}