Barra de desplazamiento personalizada CSS en div

¿Cómo puedo personalizar una barra de desplazamiento a través de CSS (hojas de estilo en cascada) para un div y no para toda la página?

Pensé que sería útil consolidar la última información sobre barras de desplazamiento, CSS y compatibilidad con el navegador.

Scroll Bar CSS Support

Actualmente, no existe ninguna definición de estilo CSS de la barra de desplazamiento entre navegadores. El artículo del W3C que menciono al final tiene la siguiente statement y fue actualizado recientemente (10 de octubre de 2014):

Algunos navegadores (IE, Konqueror) admiten las propiedades no estándar ‘scrollbar-shadow-color’, ‘scrollbar-track-color’ y otros. Estas propiedades son ilegales: no están definidas en ninguna especificación CSS ni están marcadas como propietarias (prefijadas con “-vendor-“)

Microsoft

Como han mencionado otros, Microsoft admite el estilo de barra de desplazamiento, pero solo para IE8 y superior.

Ejemplo:

  .TA { scrollbar-3dlight-color:gold; scrollbar-arrow-color:blue; scrollbar-base-color:; scrollbar-darkshadow-color:blue; scrollbar-face-color:; scrollbar-highlight-color:; scrollbar-shadow-color: } 

Chrome y Safari (WebKit)

Del mismo modo, WebKit ahora tiene su propia versión:

  • Estilo de barra de desplazamiento: https://www.webkit.org/blog/363/styling-scrollbars/
  • Demostración de todos los estilos de barra de desplazamiento de WebKit
  • Desde barras de desplazamiento personalizadas en WebKit , CSS relevante:

     /* pseudo elements */ ::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { } ::-webkit-resizer { } /* pseudo class selectors */ :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive 

Firefox (Gecko)

Firefox no tiene su propia versión de estilos de barra de desplazamiento de acuerdo con esta respuesta SO.

No hay Gecko equivalente a ::-webkit-scrollbar y amigos.

Tendrás que quedarte con jQuery.

A muchas personas les gustaría esta característica, ver:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Este informe está pidiendo exactamente lo mismo que está solicitando: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Estilo de barra de desplazamiento entre navegadores

Las bibliotecas JavaScript y los complementos pueden proporcionar una solución de navegador cruzado. Hay muchas opciones

  • 20 Plugin jQuery Scrollbar con ejemplos (24 de julio de 2012)
    • NiceScroll: plugin jQuery Scrolling para dispositivos de escritorio, móviles y táctiles
    • Scroller de contenido personalizado jQuery
    • Tiny Scrollbar: un complemento jQuery ligero
    • etc.
  • Más de 30 técnicas de JavaScript / Ajax para controles deslizantes, desplazamiento y barras de desplazamiento (07 de mayo de 2008)
  • 21 útiles tutoriales de estilos de CSS / JavaScript para barra de desplazamiento (agosto de 2012)
  • Más de 15 plugins jQuery Scrolling gratuitos y Premium (26 de agosto de 2012)

La lista podría seguir. Su mejor opción es buscar, investigar y probar las soluciones disponibles. Estoy seguro de que podrá encontrar algo que se adapte a sus necesidades.

Evitar el estilo de barra de desplazamiento ilegal

En caso de que desee evitar el estilo de la barra de desplazamiento que no ha sido correctamente prefijada con “-vendor”, este artículo en W3C proporciona algunas instrucciones básicas . Básicamente, deberá agregar el siguiente CSS a una hoja de estilo de usuario asociada con su navegador. Estas definiciones anularán el estilo de barra de desplazamiento no válido en cualquier página que visite.

 body, html { scrollbar-face-color: ThreeDFace !important; scrollbar-shadow-color: ThreeDDarkShadow !important; scrollbar-highlight-color: ThreeDHighlight !important; scrollbar-3dlight-color: ThreeDLightShadow !important; scrollbar-darkshadow-color: ThreeDDarkShadow !important; scrollbar-track-color: Scrollbar !important; scrollbar-arrow-color: ButtonText !important; } 

Preguntas duplicadas o similares / Fuente no vinculada arriba

  • Cambiar el estilo de las barras de desplazamiento
  • Navegador cruzado de estilo de barra de desplazamiento CSS
  • Cómo crear una barra de desplazamiento personalizada en un div (estilo de Facebook)

Nota: esta respuesta contiene información de varias fonts. Si se usó una fuente, entonces también está vinculada en esta respuesta.

Las barras de desplazamiento personalizadas no son posibles con CSS, necesitará algo de magia de JavaScript.

Algunos navegadores admiten reglas CSS que no son específicas, como ::-webkit-scrollbar en Webkit, pero no es ideal, ya que solo funcionará en Webkit. IE también tenía algo así, pero no creo que lo soporten nunca más.

Dale una oportunidad

Fuente: http://areaaperta.com/nicescroll/

Implementación simple

  

Es una barra de desplazamiento del complemento jQuery, por lo que sus barras de desplazamiento son controlables y tienen el mismo aspecto en los diversos sistemas operativos.

Creo que hay una cosa que falta en este hilo. Si desea implementar el desplazamiento por plugin, el mejor en 2014 es Sly .

Es una barra de desplazamiento javascript pura, por lo que sus barras de desplazamiento son controlables y tienen el mismo aspecto en los diversos sistemas operativos.

Tiene el mejor rendimiento y características. Ningún otro incluso se acerca. No pierda el tiempo eligiendo entre miríadas de otras bibliotecas de buggy medio cocidas.

Probé muchos complementos, la mayoría de ellos no son compatibles con todos los navegadores, prefiero iScroll y nanoScroller funciona para todos estos navegadores:

  • IE11 -> IE6
  • IE10 – WP8
  • IE9 – WP7
  • IE Xbox One
  • IE Xbox 360
  • Google Chrome
  • Firefox
  • Ópera
  • Safari

¡Pero iScroll no funciona con el tacto!

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

Aquí hay un ejemplo de webkit que funciona para Chrome y Safari:

CSS:

 ::-webkit-scrollbar { width: 40px; background-color:#4F4F4F; } ::-webkit-scrollbar-button:vertical:increment { height:40px; background-image: url(/Images/Scrollbar/decrement.png); background-size:39px 30px; background-repeat:no-repeat; } ::-webkit-scrollbar-button:vertical:decrement { height:40px; background-image: url(/Images/Scrollbar/increment.png); background-size:39px 30px; background-repeat:no-repeat; } 

Salida:

enter image description here

Por favor revisa este enlace. Ejemplo con demostración de trabajo

  #style-1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } 

Barras de desplazamiento CSS

FYI, esto es lo que usa Google en algunas de sus aplicaciones desde hace mucho tiempo. Compruebe en jsfiddle que si aplica las próximas clases, de alguna manera ocultan la barra de desplazamiento en cromo, pero aún funciona.

 jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark 

http://jsfiddle.net/76kcuem0/32/

Me pareció útil eliminar las flechas de las barras de desplazamiento. a partir de 2015 se ha utilizado en maps.google.com al buscar lugares en la lista de resultados en su interfaz de usuario de diseño de materiales.

Webkit scrollbar no es compatible con la mayoría de los navegadores.

Compatible con CROMO

Aquí hay una demo para webkit scrollbar Webkit Scrollbar DEMO

Si busca más ejemplos, consulte esto Más ejemplos


Otro método es el complemento Jquery Scroll Bar

Es compatible con todos los navegadores y es fácil de aplicar

Descargue el complemento de Descargar aquí

Cómo usar y para más opciones COMPRUEBE ESTO

MANIFESTACIÓN

Como mucha gente, estaba buscando algo que fuera:

  • De estilo constante y funcional en la mayoría de los navegadores modernos
  • No es una ridícula extensión jQuery inflada de 3000 líneas cr * p

… Pero, ¡ay! ¡Nada!

Bueno, si vale la pena hacer un trabajo … Pude poner en marcha algo en 30 minutos. Descargo de responsabilidad: hay bastantes problemas conocidos (y probablemente algunos aún desconocidos), pero me hace pensar en qué demonios se encuentran las otras 2920 líneas de JS en muchas ofertas.

 var dragParams; window.addEventListener('load', init_myscroll); /* TODO: Much to do for v axis! */ function bardrag_mousemove(e) { var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft; pos = Math.min(Math.max(0, pos), dragParams.maxLeft); dragParams.slider.style.left = pos + 'px'; updateScrollPosition(dragParams.slider, pos); } function updateScrollPosition(slider, offsetVal) { var bar = slider.parentNode; var myscroll = bar.parentNode; var maxView = myscroll.scrollWidth - myscroll.offsetWidth; var maxSlide = bar.offsetWidth - slider.offsetWidth; var viewX = maxView * offsetVal / maxSlide; myscroll.scrollLeft = viewX; bar.style.left = viewX + 'px'; } function drag_start(e) { var slider = e.target; var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth; dragParams = { clientX: e.clientX, offsetLeft: slider.offsetLeft, slider: e.target, maxLeft: maxLeft }; e.preventDefault(); document.addEventListener('mousemove', bardrag_mousemove); } function drag_end(e) { e.stopPropagation(); document.removeEventListener('mousemove', bardrag_mousemove); } function bar_clicked(e) { var bar = e.target; var slider = bar.getElementsByClassName('slider')[0]; if (bar.className == 'h bar') { var maxSlide = bar.offsetWidth - slider.offsetWidth; var sliderX = e.offsetX - (slider.offsetWidth / 2); sliderX = Math.max(0, Math.min(sliderX, maxSlide)); slider.style.left = sliderX + 'px'; updateScrollPosition(slider, sliderX); } } function init_myscroll() { var myscrolls = document.getElementsByClassName('container'); for (var i = 0; i < myscrolls.length; i++) { var myscroll = myscrolls[i]; var style = window.getComputedStyle(myscroll); if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) { addScroller(false, myscroll); } if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) { addScroller(true, myscroll); } } } function addScroller(isX, myscroll) { myscroll.className += ' myscroll'; var bar = document.createElement('div'); var slider = document.createElement('div'); var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight; var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight; var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim)); slider.style.width = 100 * sliderPx / offsetDim + '%'; slider.className = 'slider'; bar.className = isX ? 'h bar' : 'v bar'; bar.appendChild(slider); myscroll.appendChild(bar); bar.addEventListener('click', bar_clicked); slider.addEventListener('mousedown', drag_start); slider.addEventListener('mouseup', drag_end); bar.addEventListener('mouseup', drag_end); document.addEventListener('mouseup', drag_end); } 
 body { background-color: #66f; } .container { background-color: #fff; width: 50%; margin: auto; overflow: auto; } .container > div:first-of-type { width: 300%; height: 100px; background: linear-gradient(to right, red, yellow); } /* TODO: Much to do for v axis! */ .myscroll { overflow: hidden; position: relative; } .myscroll .bar { background-color: lightgrey; position: absolute; } .myscroll { padding-bottom: 20px; } .myscroll .h { height: 20px; width: 100%; bottom: 0; left: 0; } .myscroll .slider { background-color: grey; position: absolute; } .myscroll .h .slider { height: 100%; } 
 

Probé muchos scroll de JS y CSS y encontré que era muy fácil de usar y probar en IE y Safari y FF, y funcionó bien

AS @thebluefox sugiere

Así es como funciona

Agregue la secuencia de comandos a continuación al

      

Y esto aquí en el párrafo donde necesitas desplazarte

 
**Your Paragraph Comes Here**

Para más detalles, visite la página de complementos

Barra de desplazamiento personalizada FaceScroll

Espero eso ayude

 .className::-webkit-scrollbar { width: 10px; background-color: rgba(0,0,0,0); } .className::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); border-radius: 5px; } 

me dio un buen móvil / osx como uno.

Hay una forma en que puede aplicar barras de desplazamiento personalizadas a elementos div personalizados en sus documentos HTML. Aquí hay un ejemplo que ayuda. https://codepen.io/adeelibr/pen/dKqZNb Pero como esencia de eso. Puedes hacer algo como esto.

 

El archivo CSS se ve así.

 .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; } .force-overflow { min-height: 450px; } #style-1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } 

O usa algo como esto:

 var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(ac.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?bd:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;db?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b 

Y inicializar:

  

Y personaliza:

 .scroll-place { // ... // } .scroll { // ... // }