¿Cómo puedo comprobar si hay una barra de desplazamiento visible?
¿Es posible comprobar el overflow:auto
de 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).
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 body
selector 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;
Puede hacer esto usando una combinación de los atributos Element.scrollHeight
y 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;
}
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.
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