¿Cómo puedo comprobar si hay una barra de desplazamiento visible?

Resuelto Peter asked hace 13 años • 21 respuestas

¿Es posible comprobar el overflow:autode un div?

Por ejemplo:

HTML

<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * content
</div>

JQUERY

$('.my_class').live('hover', function (event)
{
    if (event.type == 'mouseenter')
    {
         if( ...  if scrollbar visible ? ... )
         {
            alert('true'):
         }
         else
         {
            alert('false'):
         }
    }

});

A veces el contenido es corto (sin barra de desplazamiento) y otras veces largo (barra de desplazamiento visible).

Peter avatar Jan 27 '11 16:01 Peter
Aceptado

un pequeño complemento para ello.

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

úsalo así,

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

probado funcionando en Firefox, Chrome, IE6,7,8

pero no funciona correctamente en el bodyselector de etiquetas

manifestación


Editar

Descubrí que cuando tienes una barra de desplazamiento horizontal que hace que aparezca una barra de desplazamiento vertical, esta función no funciona...

Descubrí otra solución... usaclientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;
Reigel Gallarde avatar Jan 27 '2011 09:01 Reigel Gallarde

Puede hacer esto usando una combinación de los atributos Element.scrollHeighty Element.clientHeight.

Según MDN:

El atributo de solo lectura Element.scrollHeight es una medida de la altura del contenido de un elemento, incluido el contenido que no es visible en la pantalla debido al desbordamiento. El valor de scrollHeight es igual a la clientHeight mínima que requeriría el elemento para ajustar todo el contenido en el punto de vista sin usar una barra de desplazamiento vertical. Incluye el relleno del elemento pero no su margen.

Y:

La propiedad de solo lectura Element.clientHeight devuelve la altura interior de un elemento en píxeles, incluido el relleno, pero no la altura, el borde o el margen de la barra de desplazamiento horizontal.

clientHeight se puede calcular como altura de CSS + relleno de CSS - altura de la barra de desplazamiento horizontal (si está presente).

Por lo tanto, el elemento mostrará una barra de desplazamiento si la altura del desplazamiento es mayor que la altura del cliente, por lo que la respuesta a su pregunta es:

function scrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}
Ajedi32 avatar Mar 21 '2015 21:03 Ajedi32

Debería cambiar una cosita de lo que dijo Reigel:

(function($) {
    $.fn.hasScrollBar = function() {
        return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
    }
})(jQuery);

InnerHeight cuenta la altura del control y sus acolchados superior e inferior.

kpull1 avatar Jan 26 '2012 09:01 kpull1

Esto amplía la respuesta de @Reigel. Devolverá una respuesta para las barras de desplazamiento horizontales o verticales.

(function($) {
    $.fn.hasScrollBar = function() {
        var e = this.get(0);
        return {
            vertical: e.scrollHeight > e.clientHeight,
            horizontal: e.scrollWidth > e.clientWidth
        };
    }
})(jQuery);

Ejemplo:

element.hasScrollBar()             // Returns { vertical: true/false, horizontal: true/false }
element.hasScrollBar().vertical    // Returns true/false
element.hasScrollBar().horizontal  // Returns true/false
the4tress avatar Jan 29 '2014 04:01 the4tress