javascript - vertical - ¿Detectando la presencia de una barra de desplazamiento en un DIV usando jQuery?

scroll jquery ejemplos

Question

Esta pregunta ya tiene una respuesta aquí:

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

Quiero detectar la presencia de una barra de desplazamiento en un DIV utilizando jQuery. Estaba pensando en usar $(''div'').scrollTop() pero eso devuelve 0 en ambos casos cuando la barra de desplazamiento está en la parte superior y cuando no hay ninguna barra de desplazamiento.

¿Alguna idea chicos?

Answer 1

Bueno, terminé encontrando una solución haciendo lo siguiente:

Ajustar el contenido que crece con un DIV, luego detecto si hay una barra de desplazamiento (vertical) comparando la altura de wrapperDiv con la altura de containerDiv (que normalmente tiene la barra de desplazamiento si el contenido es demasiado grande).

Si la altura de wrapperDiv es mayor que la altura de containerDiv entonces hay una barra de desplazamiento, si es más pequeña, entonces no hay barra de desplazamiento.

<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;">
    <DIV id="wrapperDiv">
        .... content here...
    </DIV>
</DIV>

Answer 2

Revisaré lo que Bobince mencionó anteriormente, ya que estás pidiendo jQuery

var div= $(''#something'');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;

Esto se debe a que scrollHeight y scrollWidth son propiedades de DOM.

Answer 3

Suponiendo que el overflow en el div es auto :

var div= document.getElementById(''something''); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;

Answer 4

// plugtrade.com - jQuery detect vertical scrollbar function //
(function($) {
    $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;
    }
})(jQuery);

ejemplo:

if($(''#mydiv'').has_scrollbar()) { /* do something */ }