Barra de desplazamiento personalizada en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales de barra de desplazamiento personalizada - custom scrollbar en CSS3.

<style>
  main{
    width: 100%;
    padding: 39px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .scrollbar-main {
    width:60%; height: 299px;
    overflow: auto;
  }
  .scrollbar-main .row {
    display: inline-block;
    padding: 12px;
    background: rgba(180,160,120,.1);
    text-align: center;
    white-space: nowrap;
  }
  .scrollbar-main::-webkit-scrollbar {
    width: 8px;
    background: white;
  }
  .scrollbar-main::-webkit-scrollbar-corner, /* Scroll bar corner */
  .scrollbar-main::-webkit-scrollbar-thumb,
  .scrollbar-main::-webkit-scrollbar-track {
    border-radius: 5px;
  }
  .scrollbar-main::-webkit-scrollbar-corner,
  .scrollbar-main::-webkit-scrollbar-track { /* Scroll bar track */
    background-color: rgba(180,160,120,.1);
    box-shadow: inset 0 0 1px rgba(180,160,120,.5);
  }
  .scrollbar-main::-webkit-scrollbar-thumb { /* Scroll bar handle */
    background-color: rgb(180,160,120);
  }
</style>

<main>
    <div class="scrollbar-main">
      <span v-for="row in rows" class="row">   <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...
      </p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...
      </p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...
      </p></span>
    </div>
</main>

<script>
  export default {
    computed: {
      rows () {
        return Array.from({ length: 56 }).map((v, i) => Array(99).fill(i + 11).(' '));
      }
    }
  }
</script>

Ver resultado

Recomendamos Leer:

- Cambiando el diseño de las barras de scroll con CSS