CSS tiene selector de barra de desplazamiento? Elementos de destino solo con barras de desplazamiento visibles

Preguntas HTML
⏰ 2 minutos de lectura

Quiero apuntar a elementos que tengan una barra de desplazamiento visible usando solo CSS. ¿Es esto posible sin javascript?

Por ejemplo, si tengo 3 divs diseñados con overflow-y:auto¿Cómo cambio los estilos para ellos solo cuando aparece su barra de desplazamiento?

  • No creo que esto sea posible, pero me gustaría que me demuestren que estoy equivocado.

    – Jonas Grumann

    29 de junio de 2015 a las 11:49

  • Creo que esto es similar al enlace de pregunta, no parece posible usar solo CSS

    – KAD

    29 de junio de 2015 a las 11:50

  • No con CSS puro. Sé que dijiste que no JS, pero esto podría ser útil si cambias de opinión stackoverflow.com/questions/4814398/…

    – Igualdad

    29 de junio de 2015 a las 14:12

  • Supongo que no sería posible diseñar elementos dependiendo de si hay una barra de desplazamiento o no. Considere el escenario en el que cuando tiene una barra de desplazamiento, modifica la altura de los elementos internos para que se elimine la barra de desplazamiento, luego vuelven a su altura original, aparece la barra de desplazamiento, etc.

    – xpy

    29 de julio de 2016 a las 8:36

CSS no cubre esta selección. Necesitas usar JavaScript.

Con CSS puro lo dudo pero tampoco requiere mucho código javascript, mira este ejemplo:

document.querySelectorAll('*').forEach(el => {
  if (el.offsetHeight > document.documentElement.offsetHeight) {
      console.log('I am higher than my father: ', el);
      el.classList.add('higher-class');
  }
});
.higher-class {
  color: red;
}
<div class="container" style="height:50px;">
  <div class="some-child"  style="height:100px;font-size: 5rem">
    Higher element
  </div>
</div>

controlar

avatar de usuario de cronoklee
cronoklee

No es posible sin javascript

Sin embargo, solo requiere una sola línea de JS para alternar una clase CSS cuando la barra de desplazamiento está visible:

el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)

Aquí hay una demostración:

//toggles a class on an element when the scrollbar is visible:
function updScrollClass(el) {
  return el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)
}
//changes the height of myDiv every second:
setInterval(function(){
  var myDiv = document.getElementById('myDiv')
  myDiv.classList.toggle('tall')
  updScrollClass(myDiv)
},1000)
#myDiv{ 
  width:150px;
  height:200px;
  overflow:auto;
}

#myDiv.tall{
  height:300px;
}

.scrollbarOn{ 
  background:yellow;
}
<div id='myDiv' class="tall">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis nisl in accumsan porta. Etiam in urna orci. Vestibulum elementum, velit ac vestibulum efficitur, est elit auctor massa, nec porta ante nunc eget tellus. Integer eu ligula felis. 
</div>

¿Ha sido útil esta solución?