Como Personalizar las Barras de Scroll de un Sitio Web con CSS

En este videotutorial te enseñare como personalizar las barras de desplazamiento de tu sitio web utilizando CSS.
🚀 Blog de diseño web:
www.falconmast...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
--
♦ Código del Video
github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters

[@FalconMasters]

Si te gusto el video por favor dale manita arriba y suscribete para mas videos como este.

[@rbenx_c]

FalconMasters se puede hacer un scroll horizontal?

[@rbenx_c]

y poner imágenes para hacer como una galería.

[@rainelurdaneta1435]

FalconMaster, contigo empecé a aprender HTML y CSS con los cursos de KZbin, hoy en día parte de donde estoy también es tuyo el mérito, por enseñarme... Gracias.

[@calle13comentando]

Yo he pagado tu curso de diseño web en Udemy y no me arrepiento del dinero invertido, te lo mereces. Todo bien explicado y sintetizado, explicas agradablemente y da ganas de seguir en el vídeo. Actualmente estoy estudiando en un centro privado desarrollo de apps multiplataforma, y el contenido de tu curso me ayuda bastante a diario, muchas gracias desde España, un saludo! 🤣

[@cubetasdehacero4096]

Estos dos últimos vídeos son muy geniales, sigue así :)

[@FalconMasters]

Muchas gracias

[@johnconnor9575]

eres el mejor muchas gracias, soy novato y apenas voy aprendiendo muchas gracias bro

[@javierjosemelendezbellido7502]

Gracias, Dios bendiga tu vida y cada día alcances mas conocimiento.

[@cesarparra5862]

Ehhh ave María te Felicito parcero... Lo que estaba buscando ... Espectacular

[@erickromero16]

likeeee men yo llevo meses buscando esto jaja

[@jhosteen1792]

yo igual

[@yefersonyairtejadarivas7270]

@@jhosteen1792 y yo lo vengo buscando hace como 2 años 😂😂😂😂😂

[@danielbernal3471]

Como siempre siendo un crack jejejeje

[@FranyeOrtiz]

Este video es sencillo pero MUY UTIL! Gracias de nuevo Falcon

[@drophy]

Que chido encontrar buen contenido en español. Gracias bro!

[@virax785]

Lo esperaba hace un año tio falcon :'c gracias por tu contenido

[@cristiancanessa]

Grande maestro. Cada video aprendo mucho

[@angelitoculon]

falcoooooooon me salvaste la vida gracias

[@shepharddeveloper5823]

Que hermoso!!! xD siempre quise esto :3

[@FranyerRangel]

Excelente dato Falcon!! Saludos desde Venezuela!! :D

[@javihosen1317]

Muy bueno falcón! Lo voy a emplear. Gracias.

[@uniontic]

Excelente Carlos. Saludos desde Aracataca.

[@FalconMasters]

Saludos igualmente!

[@FranksFD]

Muy buen video, gracias por la info.

[@joseenrique9174]

Excelente vídeo amigo me ayudaste mucho Gracias :D

[@tryhard4763]

Nuevo sub 😎, excelente contenido!

[@johnvela1508]

Buen video, sigue asi 😌

[@enzoalcon4803]

Me ayudaste mucho gracias.-

[@fakuch6598]

Felicidades por los 200.000 subs :D

[@cindy1306vampirs]

Gracias Falcon!

[@JuankBonifaz]

Ayuda ! Es posible ocultarlo? ,que funcione solo con el deslizador del mouse, algo haci como lo hacemos en los móviles

[@cbr9731]

Código CSS body::-webkit-scrollbar { width: 7px; background: #021b79; } body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius:10px; border-right: 2px solid #021b79; }

[@lalolg5726]

Más vídeos así!!!!

[@gabriworld]

Pequeño consejo pero genial!

[@cristhiandev4245]

genial amigo saludos desde peru

[@FalconMasters]

Saludos igualmente

[@luismoreno7540]

¡Muchas gracias!

[@LuisAntonio-cd4ck]

Excelente video, sigue adelante amigo

[@SuitJomRecOficial]

El unico que sirvio rey ... gracias

[@MrYocastro]

Excelente video!! Será de gran ayuda...

[@guildguaxi]

Muchas gracias Falcon, por lo que veo leiste mi comentario pidiendo este tutorial, ojala y sigas activo con tu canal porque es de mucha ayuda, algo que me gustaria es que hagas videos de javascript puro, no me refiero a un curso si no mas bien haciendo efectos como por ejemplo un slideshow que sea infinito y que vaya de izquierda a derecha o viceversa!!! Saludos : )

[@guildguaxi]

Por cierto, que bueno que estes usando Visual Studio Code, es un excelente editor!!!! : )

[@FalconMasters]

Si leí tu comentario, por eso hice el video. Voy a tener en cuenta esos videos, aunque ya tengo una lista de videos que van a ir antes. Y si VS esta genial, es muy buena opción.

[@guildguaxi]

Genial, muchas gracias : )

[@JoseGarcia-fr4cp]

Que buen contenido bro, ademas super bien explicado :DDD

[@Raven_edits777]

buen video me ayudo con un proyecto

[@juliocamacho6298]

Excelente! Me has ayudado mucho FalconMasters muy útil tu contenido like...

[@FalconMasters]

Gracias!

[@danielmezafp]

Sii porfin un video que buscaba :0 gracias

[@FalconMasters]

De nada para eso estamos :)

[@danielmezafp]

como que estamos :v? son diferentes personas :v?

[@FalconMasters]

Haha, si soy solo yo en el canal de youtube, pero es una forma de decirlo.

[@danielmezafp]

Ah ok ya iba a decir este men ya tiene su propia empresa alv :,v

[@josereynelchauxperez947]

Excelente material, muchas gracias !!!

[@ferro2401]

Como siempre al único que le entiendo al 100...mucho éxito falcon eres un crack!

[@shangames6609]

es magnífico :D

[@Alexis_0159]

1:20 Yo aun sigo utilizando el opera mini, muchos lo usan aún xd

[@CRISTIAN751]

Eres muy bueno. Gracias

[@ArteRubi-1]

Hola carlos, buen video! podrias hacer tutoriales de C++ like para que lo vea o vea

[@marcelovasan]

Muchas gracias agosto 2022 super funcional

[@PRINCIPIOYFIN_]

Muchas gracias!! Buen Tutorial..

[@eduardochx_]

Esta genial!! 👍

[@josedanielchacong7245]

Hola Falcon, muy buen video me gusto mucho y es bastante importante para agregar estilo a las páginas web, fijate esto es una petición mia, yo se que puede sonar extensa y aburrida pero varios de mis colegas y yo (claro jejeje) estamos interesado en ver un tutorial tuyo de como hacer una tienda online (porque los tutoriales que hay en internet la verdad no son muy completos) y pues que si hicieras ese tutorial explicaras como agregar los datos de la compra a una base de datos, y que cuando alguien compre algo llegue al gmail del propietario de la página (osea el dueño de la empresa) una notificación, que se agregue a la página de perfil del usuario que compro, una "cola" o algo de ese estilo. Gracias, disculpa la molestia y sigue asi, vamos a por los 500K.

[@EldiariodeAlbert]

Excelente! gracias muy util

[@alexcalle5391]

@FalconMaster y cono puedes modificar las flechitas de la parte superior e inferior?

[@jesussalcido2578]

Gracias persona :D me sirvió de ayuda

[@srCharli]

hola hola y mil gracias....pregunta: se puede en firefox hacer que desaparezca el scroll sin perder la función o, al no aceptar ninguna propiedad simplemente aparece y ya? :) thanks!

[@gncfhcnvc]

Buen video Ojala subas mas tips :D

[@jesusdanielroamorales2059]

brother te quiero

[@Anonimo23]

Muy buen tutorial! podrias hacer uno de la propiedad webkit en profundidad? gracias!

[@1337Unlucky]

The king is back

[@FalconMasters]

D:

[@tatan1994]

Carlos haz un video mostrando los cursos que tienes en KZbin y en udemy. yo compré el de PHP y me fascinó, de verdad que si lo dictas tú no lo pienso dos veces para comprarlo

[@FalconMasters]

Mis cursos de Udemy son: El curso de PHP y MYSQL, Curso de Diseño Web Profesional, Curso de Bootstrap 4.

[@HijadeOdin]

Muy bien, muy bonito pero, Y LA FLECHITA!! Hay alguna manera de seguirla viendo aunque se pase el css por la scroll bar? O hay una manera de refrenciarla dentro del DOM? Gracias de antemano a cualquiera que tenga una referencia de esto.

[@mysteriousbeat8295]

Falcon, primero que nada te amo we xD Una pregunta, cómo haces esas líneas decorativas como la que tienes color naranja debajo de tu título?

[@FalconMasters]

Hola. Son simplemente un con un alto de unos 5px me parece.

[@marcodeev4168]

Gracias !

[@facugainz]

o quiero que cuando abra una nueva ventana vaya para abajo sola hasta la mitad de la pagina peo en html eso e puede algun codigo?

[@Jorgelas_]

Ya no hay mas tutoriales con la consola del ordenador?

[@carlospizarro9521]

me sirvio mucho pero porque no funciona al momento de verlo en tamaños de telefonos moviles ??

[@JavierGarcia-qk7do]

genio!

[@fernandofernandez2437]

me aparecio de la nada la barra de scroll en el navegador y no se como se quita !! siempre usaba la ruedita del mouse o las flechas del teclado .... ayudaaaa !!! gracias

[@jfloresmacias]

Gracias crack!

[@AlisterDiaz]

Excelente!!!

[@alexisrojas9908]

Como se puede personalizar la barra de toda la página, es decir completamente y no dentro de un contenedor ?

[@giorgibv169]

Con esto pude hackear la nasa 😎

[@contodorespeto2152]

quiero poner el scroll al lado izquierdo sabes como hacerlo ?

[@JCorralesG97]

Mas videos por favoooooooor!

[@arengutierrez7536]

no me funciona porque? :/ se lo pongo al body y me funciona pero se lo pongo a una clase y no coge.

[@franciscogomez554]

Buen día Carlos, hago una simple pregunta, que carrera estudiaste? O que carrera seguiste? Por que me interesa mucho lo que tu haces para poder trabajar en un futuro, es más eh aprendido bastante de tus videos y ya dominó el html y CSS, gracias espero una respuesta.

[@jclizardo]

Podrias hacer un video de estadisticas o charts en bootstrap u otra modalidad que conozcas. Gracias.

[@eduardoexequielromeroseco3825]

Con Sass como seria ? body &:-webkit-scrollbar width: 7px algo asi o estoy mal?

[@a.gomez1599]

El ancho lo pueden cambiar con la propiedad: height: 9px;

[@walemfly]

Hola amigo, existe o conoces alguna manera en la que la scrollbar horizontal pueda ponerse en la parte superior del contenedor??... Saludos y gracias.

[@davidleon4283]

wtf

[@AndroideMM]

como se hace con la barra de abajo

[@RobertoMejiaCollazos]

No es compatible con Firefox, alguna ayuda extra por favor , el video esta muy bueno solo falta la compatibilidad con otros navegadores porfa dateame esa info, gracias y que sigan los exitos.

[@jcruz30]

buen video, me gusto el poder personalizar la barra de scroll, sabes si tambien es posible aplicar el hover en la barra? me gustaria darle un efecto de trasparencia

[@Alehenao]

Si se puede amigo, pero por lo que veo el transition no funciona, entoces se mira muy brusco pero este seria un ejemplo body::-webkit-scrollbar-thumb:hover{ background: rgb(234, 68, 68, .9); }

[@lucasc530]

Buenísimo el video, pero una pregunta, ¿Se puede poner una imagen como barra de scroll ? Y otra cosa, ¿se puede dividir el background-color del -webkit-scrollbar para que por ejemplo la primer mitad tenga un color y la segunda mitad tenga otro color? Gracias.

[@nitr3lduss568]

Puedes darle en vez de un color normal, darle un degradado/gradiante con 2 colores

[@jahirvelasquez6985]

FalconMaters puedes hacer un tutorial de un loading y luego q ingrese a la pagina :)

[@maximoocanto8659]

Hola disculpa como podría agregarle una imagen al scroll

[@victoracosta6363]

capo, un espectaculo tutorial, pero me gustaria que me ayudaras con un inconveniente que tengo, no puedo conseguir que mi contenedor me permita usar porcentaje en lugar de pixeles, asi se adapta a diferentes pantallas, podrias decirme como puedo hacerlo? o si tenes algún tutorial ya echo decirme. muchas gracias

[@brandon400]

/* Scroll Personalizado */ .contenedor::-webkit-scrollbar { width: 7px; } .contenedor::-webkit-scrollbar-thumb { background: #ff9d00; border-radius: 5px; }

[@Kelvin-w6s]

Sabes como quitar las barras de scroll de abajo para que no hagan zoom y que quede en un tamaño fijo

[@masterzero2917]

arias un curso sobre cómo hacer una red social por favor

[@josegregoriovasquez6982]

Bien

[@Jos3Fox]

Alguien me puede ayudar con esta duda, estoy creando un Menú intentando que los iconos se transformen en letras por medio de una animación, pero no me sale o no sé donde buscar mas información sobre el tema. Alguien me puede orientar donde buscar? Gracias.

[@saberkura]

Hola y como hago para aparecer y desaparecer el scroll es decir el uso de efecto de desvanecer.... no se si es lo correcto en decir.

[@FalconMasters]

Lamentablemente no podemos aplicarle una transición como a cualquier otro elemento. Yo he intentado y no lo he logrado.

[@saberkura]

ok gracias

[@karlavianeybravomora39]

saben porque no puedo quitar laesquina de el scrooll???

[@angelparrales23]

Que bien

[@martinsparra946]

falcon que estudiaste?

[@lalvwebdesign6946]

Hola carlos Arturo tengo una duda ojalá puedas ayudarme o alguno de la comunidad, trabajo con bootstrap y a la hora de optimizar la página web siempre me sale este error "Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página" , "Render blocking CSS and/or JS" , si hay alguien que me pueda echar una mano les agradecería mucho, saludos.

[@Trixgen]

Oye bro buen vídeo like siembre esperándote y keria saber si puedes ser un vídeo para personalizar la raya cuando carga una paguina no se como se llama o me puedes decir porfas gracias

[@FalconMasters]

No entiendo muy bien a que raya te refieres.

[@Trixgen]

mira la raya roja que sale aqui como se llama o si puedes hacer un tuto te lo agradeceria fastdroidgen.net/xtempmail/

[@hectortrejo6333]

Yo viendo este vídeo desde opera -_- jajaja

[@kennethorlando1776]

Buen video Carlos // quiera saber si pudeiras hacer un video de unity?? Saludos

[@FalconMasters]

No conozco de Unity, por lo que la verdad no creo sacar un video de ello pronto.

[@kennethorlando1776]

Muy bien es una plataforma para crear Videjuegos espero que tomes en cuenta este punto. para futuros proyectos ,ya que yo quisiera saber mas, no tengo ni idea por donde se empieza jeje Gracias. saludos desde Guatemala bendiciones :D

[@cubetasdehacero4096]

Que extenciones tienes en Visual Studio?

[@FalconMasters]

De momento no tengo ninguna, solo el theme Ayu.

[@stellamaris3373]

Carlos no me reconoce el -webkit-scrollbar que puede hacer.. utilizo mozilla y google chrome actuales...

[@FalconMasters]

Mozilla no soporta esta propiedad, en chrome es donde si te debería salir. Revisa bien el código, puedes compararlo con el mio que puse para descarga en la descripción del video.