¿Cuál es la forma más rápida de comprobar si un elemento tiene barras de desplazamiento?
Una cosa, por supuesto, es verificar si el elemento es más grande que su ventana gráfica, lo que se puede hacer fácilmente verificando estos dos valores:
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth
pero eso no significa que también tenga barras de desplazamiento (por lo que los humanos pueden desplazarlo).
Pregunta
¿Cómo verifico las barras de desplazamiento en 1 navegador cruzado y 2 solo javascript (como sin jQuery )?
Solo Javascript, porque necesito la menor sobrecarga posible, porque me gustaría escribir un filtro selector de jQuery muy rápido
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")
Supongo que tendría que verificar la overflow
configuración de estilo, pero ¿cómo lo hago en un navegador cruzado?
Edición adicional
No solo overflow
configuraciones de estilo. Comprobar si un elemento tiene barra de desplazamiento no es tan trivial como parece. La primera fórmula que escribí arriba funciona bien cuando el elemento no tiene un borde, pero cuando lo tiene (especialmente cuando el borde tiene un ancho considerable), la offset
dimensión puede ser mayor que la scroll
dimensión, pero el elemento aún se puede desplazar. De hecho, tenemos que restar los bordes de la offset
dimensión para obtener la ventana gráfica desplazable real del elemento y compararla con la scroll
dimensión.
Para futura referencia
:scrollable
El filtro selector de jQuery está incluido en mi .scrollintoview()
complemento jQuery. El código completo se puede encontrar en la publicación de mi blog si alguien lo necesita. Aunque no proporcionó la solución real, el código de Soumya me ayudó considerablemente a resolver el problema. Me apuntó en la dirección correcta.
overflow:hidden
asentado? Habría contenido en exceso, pero aún no es desplazable. El problema no es tan simple como parece.