css - personalizar - scroll horizontal bootstrap

CSS personalizado barra de desplazamiento en div

Question

¿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?

Answer 1

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:

Answer 2

Como muchas personas, estaba buscando algo que era:

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

... Pero, ¡ay, nada!

Bueno, si vale la pena hacer un trabajo ... Pude hacer funcionar algo en unos 30 minutos. Descargo de responsabilidad: hay bastantes problemas conocidos (y probablemente hasta ahora desconocidos), pero me hace preguntarme qué hay en la Tierra en 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%;
}

<div class="container">
  <div></div>
</div>

Answer 3

Creo que hay una cosa que falta en este hilo. Si, por casualidad, desea implementar el desplazamiento a través del plugin, el mejor en 2014 es Sly .

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

Tiene el mejor rendimiento y características. Ningún otro ni siquiera se acerca. No pierda el tiempo eligiendo entre miles de bibliotecas de buggy medio horneadas.

Answer 4

Existe una forma mediante la cual 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 una idea de ello. Puedes hacer algo como esto.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

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;
}

Answer 5

La barra de desplazamiento de Webkit no es compatible con la mayoría de los navegadores.

Soportes en CHROME

Aquí hay una demostración de webkit scrollbar DEMO de Webkit Scrollbar DEMO

Si estás buscando más ejemplos, mira esto, más ejemplos.

Otro método es Jquery Scroll Bar Plugin

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

Descarga el plugin desde Descargar Aquí

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

DEMO

Answer 6

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

Algunos navegadores admiten reglas CSS no especificadas, como ::-webkit-scrollbar en Webkit, pero no son ideales porque solo funcionarán en Webkit. IE también tenía algo así, pero creo que ya no lo apoyan.

Answer 7

O usa algo como esto:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.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?b-d: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;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?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<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

Y inicializar:

<body onload="new MiniScroll(this);"></body>

Y personalizar:

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

Answer 8

Para su información, esto es lo que Google utiliza en algunas de sus aplicaciones desde hace mucho tiempo. Verifica en el archivo jsfiddle que si aplicas las siguientes clases, de alguna manera ocultan la barra de desplazamiento en Chrome pero aún funciona.

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

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

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

Answer 9

Pensé que sería útil consolidar la información más reciente sobre las barras de desplazamiento, CSS y la compatibilidad del navegador.

Barra de desplazamiento compatible con CSS

Actualmente, no existen definiciones de estilo CSS en la barra de desplazamiento de varios navegadores. El artículo del W3C que menciono al final tiene la siguiente declaración y se actualizó 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 de CSS ni están marcadas como propiedad (prefijándolas con "-vendor-")

Microsoft

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

Ejemplo:

<!-- language: lang-css -->

    .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:

• Barra de desplazamiento de estilo: 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 según this respuesta SO.

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

Tendrás que seguir con jQuery.

Mucha gente le gustaría esta característica, ver:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Este informe solicita exactamente lo mismo que solicita: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Estilo de barra de desplazamiento de varios navegadores

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

• 20 complemento de jQuery Scrollbar con ejemplos (24 de julio de 2012)
  • NiceScroll: jQuery Scrolling plugin para dispositivos de escritorio, móviles y táctiles
  • Desplazador de contenido personalizado jQuery
  • Barra de desplazamiento pequeña: un complemento ligero de jQuery
  • etc.
• Más de 30 técnicas de JavaScript / Ajax para controles deslizantes, barras de desplazamiento y barras de desplazamiento (7 de mayo de 2008)
• 21 útiles tutoriales de estilo de CSS / JavaScript de la barra de desplazamiento (agosto de 2012)
• Más de 15 complementos de jQuery Scrolling gratuitos (26 de agosto de 2012)

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

Prevenir el estilo de barra de desplazamiento ilegal

En caso de que quiera evitar un estilo de barra de desplazamiento que no haya sido correctamente prefijado 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

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

Nota: Esta respuesta contiene información de varias fuentes. Si se utilizó una fuente, también está vinculada en esta respuesta.

Answer 10

Por favor revise 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

Answer 11

Probé un montón de JS y CSS scroll y encontré que era muy fácil de usar y probado en IE y Safari y FF y funcionó bien

AS @thebluefox sugiere

Así es como funciona

Agregue el siguiente script a la

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $(''#demo1'').alternateScroll();
        $(''#demo2'').alternateScroll({ ''vertical-bar-class'': ''styled-v-bar'', ''hide-bars'': false });  
    })
</script>

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

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

Para más detalles visite la página del plugin.

Barra de desplazamiento personalizada FaceScroll

Espero eso ayude

Answer 12

Prueba esto

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

Implementación simple

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

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

Answer 13

iScroll muchos complementos, la mayoría de ellos no son compatibles con todos los navegadores, prefiero que iScroll y nanoScroller funcionen 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 : nanoScroller

Answer 14

.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.