Inicia sesión




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.
Background:point_right box-shadow, ::-webkit-scrollbar
<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 usuario 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 usuario 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 usuario 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).join(' '));
      }
    }
  }
</script>
Ver resultado
Poca compatibilidad, muchos estilos son incontrolables, se recomienda utilizar una solución similar como la barra de desplazamiento perfecta en el entorno de producción

Recomendamos Leer:

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

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-10
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial

Barra de desplazamiento personalizada en CSS3
Barra de desplazamiento personalizada en CSS3 Barra de desplazamiento personalizada en CSS3...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo espiar Facebook y obtener la cuenta de alguien

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-23
  • Categorias: Android Redes Sociales Facebook Noticias Tutorial

Saber si te han hackeado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-16
  • Categorias: Redes Sociales hacker Noticias Tutorial

Mejoras en los graficos y tablas en Google App

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-14
  • Categorias: Google Apps Herramientas Ofimaticas Noticias Tutorial

Access desde cero

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-14
  • Categorias: Herramientas Ofimaticas Microsoft Cursos Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial