Verifique se o elemento HTML possui barras de rolagem

Qual é a maneira mais rápida de verificar se um elemento possui barras de rolagem?

Uma coisa, claro, é verificar se o elemento é maior do que sua janela de visualização, o que pode ser feito facilmente verificando estes dois valores:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

mas isso não significa que ele também tenha barras de rolagem (portanto, pode ser rolado por humanos).

Questão

Como faço para verificar se há barras de rolagem em um 1 cross browser e 2 única javascript (como em nenhum jQuery ) caminho?

Somente Javascript, porque preciso da menor sobrecarga possível, porque gostaria de escrever um filtro seletor jQuery muito rápido

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

Suponho que teria que verificar as overflowconfigurações de estilo, mas como faço isso em um navegador cruzado?

Edição adicional

Não apenas overflowconfigurações de estilo. Verificar se um elemento possui uma barra de rolagem não é tão trivial quanto parece. A primeira fórmula que escrevi acima funciona bem quando o elemento não tem uma borda, mas quando tem (especialmente quando a borda é de largura considerável), a offsetdimensão pode ser maior do que a scrolldimensão, mas o elemento ainda pode ser rolável. Na verdade, temos que subtrair as bordas da offsetdimensão para obter a janela de visualização rolável real do elemento e compará-la à scrolldimensão.

Para referência futura

:scrollableO filtro seletor jQuery está incluído no meu .scrollintoview()plugin jQuery. O código completo pode ser encontrado na postagem do meu blog se alguém precisar. Mesmo não fornecendo a solução real, o código de Soumya me ajudou consideravelmente a resolver o problema. Isso me apontou na direção certa.

Eu encontrei isso em algum lugar algumas semanas atrás. Funcionou para mim

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

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

/* you'll get true/false */

Experimentar:

Para barra de rolagem vertical

el.scrollHeight> el.clientHeight

Para barra de rolagem horizontal

el.scrollWidth> el.clientWidth

Eu sei que isso funciona para IE8 e Firefox 3.6+, pelo menos.

Isso pode parecer (ou ser) um pouco hackeado, mas você pode testar as propriedades scrollTope scrollLeft.

Se eles forem maiores que 0, você sabe que existem barras de rolagem. Se forem 0, defina-os como 1 e teste-os novamente para ver se obtém um resultado de 1. Em seguida, defina-os de volta para 0.

Exemplo: 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'));

Acredito que haja uma propriedade diferente para o IE, então vou atualizar em um minuto com isso.

EDIT: Parece que o IE pode oferecer suporte a esta propriedade. (Não consigo testar o IE agora.)

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

Aqui está outra solução:

Como algumas pessoas apontaram, simplesmente comparar offsetHeight e scrollHeight não é suficiente, pois eles diferem em elementos com overflow oculto, etc., que ainda não possuem barras de rolagem. Portanto, aqui também estou verificando se o estouro é scroll ou auto nos estilos calculados para o 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,
  };
}

Estou um pouco atrasado para a festa, mas ...

Eu acredito que você pode detectar barras de rolagem com e.offsetWidth vs. e.clientWidth. A largura do deslocamento inclui bordas e barras de rolagem, preenchimento e largura. A largura do cliente inclui preenchimento e largura. Por favor, veja:

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

Você precisa verificar:

1. Se o elemento tem ou não overflow definido como auto / scroll (incluindo overflowX / Y) usando o estilo computado / em cascata / atual.
2. Se o elemento tiver overflow definido como auto / scroll. Estabeleça o offsetWidth e clientWidth.
3. Se clientWidth for menor que offsetWidth - borda direita (encontrada novamente por meio do estilo computado / em cascata / atual), você sabe que tem uma barra de rolagem.

Faça o mesmo para a vertical (offset / clientHeight).

O IE7 relata um clientHeight de 0 para alguns elementos (não verifiquei o porquê), portanto, você sempre precisa da primeira verificação de estouro.

Espero que isto ajude!

Existem vários problemas no caso de verificar a existência de barras de rolagem, um dos quais é que no mac você não tem nenhuma barra de rolagem visível, então ambas as soluções acima não lhe dariam uma resposta precisa.

Portanto, como a renderização do navegador não é muito frequente, você pode verificar a rolagem alterando a rolagem e configurando-a novamente:

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;
};

Só estou brincando aqui, pois nenhuma das soluções acima funcionou para mim (até agora). Eu encontrei algum sucesso comparando a altura de rolagem de um Div com seu offsetHeight

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

Parece me dar uma comparação precisa ... até agora. Alguém sabe se isso é legítimo?

Para o IE11 (Internet Explorer 11), tive que alterar a lógica para:

// 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;

Isso ocorre porque o IE relata scrollHeight como 1 maior do que clientHeight quando nenhuma barra de rolagem está presente, mas aproximadamente 9 maior quando uma barra de rolagem está presente

Se você precisa saber se existe uma barra de rolagem presente em toda a página da web e com suporte completo ao navegador, você pode usar isto:

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

É importante usar em window.innerHeightvez de document.body.clientHeightporque em alguns navegadores móveis clientHeight não obterá o tamanho da barra de endereço, mas scrollHeight sim, então você obtém cálculos errados.

nenhuma dessas respostas está correta. você tem que usar isto:

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

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

Adicione um elemento 100% largo dentro dele. Em seguida, defina o estouro como oculto. Se o estilo calculado do elemento (de jQ) muda, o pai tinha uma barra de rolagem.

EDIT: Parece que você quer um método de navegador cruzado como getComputedStyle . Experimentar:

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