Compruebe si el elemento HTML tiene barras de desplazamiento

¿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 overflowconfiguración de estilo, pero ¿cómo lo hago en un navegador cruzado?

Edición adicional

No solo overflowconfiguraciones 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 offsetdimensión puede ser mayor que la scrolldimensión, pero el elemento aún se puede desplazar. De hecho, tenemos que restar los bordes de la offsetdimensión para obtener la ventana gráfica desplazable real del elemento y compararla con la scrolldimensión.

Para futura referencia

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

Encontré esto en algún lugar hace un par de semanas. Funcionó para mí.

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

Tratar:

Para barra de desplazamiento vertical

el.scrollHeight> el.clientHeight

Para barra de desplazamiento horizontal

el.scrollWidth> el.clientWidth

Sé que esto funciona para IE8 y Firefox 3.6+ al menos.

Esto puede parecer (o ser) un poco complicado, pero puede probar las propiedades scrollTopy scrollLeft.

Si son mayores que 0, sabrá que hay barras de desplazamiento. Si son 0, configúrelos en 1 y pruébelos nuevamente para ver si obtiene un resultado de 1. Luego, vuelva a configurarlos en 0.

Ejemplo: http://jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

Creo que hay una propiedad diferente para IE, así que lo actualizaré en un minuto.

EDITAR: Parece que IE puede admitir esta propiedad. (No puedo probar IE en este momento).

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

Aquí hay otra solución:

Como señalaron algunas personas, simplemente comparar offsetHeight y scrollHeight no es suficiente ya que difieren en elementos con desbordamiento oculto, etc., que aún no tienen barras de desplazamiento. Entonces, aquí también estoy verificando si el desbordamiento es de desplazamiento o automático en los estilos calculados para el elemento:

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

Tal vez llegue un poco tarde a la fiesta, pero ...

Creo que puede detectar barras de desplazamiento con e.offsetWidth frente a e.clientWidth. El ancho de compensación incluye bordes y barras de desplazamiento, relleno y ancho. El ancho del cliente incluye relleno y ancho. Por favor mira:

https://developer.mozilla.org/en/DOM/element.offsetWidth (segunda imagen) https://developer.mozilla.org/en/DOM/element.clientWidth (segunda imagen)

Necesitas comprobar:

1. Si el elemento tiene desbordamiento configurado en automático / desplazamiento (incluido overflowX / Y) usando el estilo calculado / en cascada / actual.
2. Si el elemento tiene desbordamiento configurado en auto / scroll. Establezca offsetWidth y clientWidth.
3. Si el clientWidth es menor que el offsetWidth - borde derecho (que se encuentra nuevamente a través del estilo calculado / en cascada / actual), entonces sabrá que tiene una barra de desplazamiento.

Haga lo mismo para la vertical (offset / clientHeight).

IE7 informa un clientHeight de 0 para algunos elementos (no he verificado por qué), por lo tanto, siempre necesita la primera verificación de desbordamiento.

¡Espero que esto ayude!

Hay varios problemas en caso de verificar la existencia de barras de desplazamiento, uno de los cuales es que en Mac no tiene ninguna barra de desplazamiento visible, por lo que las dos soluciones anteriores no le darían una respuesta precisa.

Entonces, debido a que la representación del navegador no es muy frecuente, puede verificar el desplazamiento con el cambio de desplazamiento y luego volver a configurarlo:

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

Simplemente jugando aquí ya que ninguna de las soluciones anteriores funcionó para mí (hasta ahora). He tenido cierto éxito al comparar la altura de desplazamiento de una div con su altura de desplazamiento.

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

Parece darme una comparación precisa ... hasta ahora. ¿Alguien sabe si esto es legítimo?

Para IE11 (Internet Explorer 11) tuve que cambiar la lógica a:

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

Esto se debe a que IE informa scrollHeight como 1 más grande que clientHeight cuando no hay barra de desplazamiento, pero aproximadamente 9 más grande cuando hay una barra de desplazamiento.

Si necesita saber si hay una barra de desplazamiento presente para toda la página web y con soporte completo del navegador , puede usar esto:

const hasScrollbar = document.body.scrollHeight > window.innerHeight

Es importante usarlo en window.innerHeightlugar de document.body.clientHeightporque en algunos navegadores móviles clientHeight no obtendrá el tamaño de la barra de direcciones, pero scrollHeight sí, por lo que obtendrá cálculos incorrectos.

ninguna de estas respuestas es correcta. tienes que usar esto:

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

Agrega un elemento 100% ancho en su interior. Luego, establezca el desbordamiento en oculto. Si cambia el estilo calculado del elemento (de jQ), el padre tenía una barra de desplazamiento.

EDITAR: Parece que desea un método de navegador cruzado como getComputedStyle . Tratar:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}