Detectar se uma página tem uma barra de rolagem vertical?

Eu só quero que um JQ / JS simples verifique se a página / janela atual (não um elemento específico) tem uma barra de rolagem vertical.

O Google me fornece coisas que parecem excessivamente complexas apenas para esse recurso básico.

Como isso pode ser feito?

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

tente isto:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

No entanto, isso informa apenas se o scrollHeight vertical é maior que a altura do conteúdo visível. A hasVScrollvariável conterá verdadeiro ou falso.

Se você precisar fazer uma verificação mais completa, adicione o seguinte ao código acima:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

Eu tentei a resposta anterior e não parece estar trabalhando com o $ ("body"). Height () não representa necessariamente toda a altura do html.

Corrigi a solução da seguinte maneira:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

Vamos trazer essa pergunta de volta dos mortos;) Há uma razão pela qual o Google não fornece uma solução simples. Casos especiais e peculiaridades do navegador afetam o cálculo, e não é tão trivial quanto parece.

Infelizmente, existem problemas com as soluções descritas aqui até agora. Não pretendo menosprezá-los - eles são ótimos pontos de partida e abordam todas as principais propriedades necessárias para uma abordagem mais robusta. Mas eu não recomendaria copiar e colar o código de nenhuma das outras respostas, porque

• eles não capturam o efeito do conteúdo posicionado de maneira confiável em vários navegadores. As respostas que se baseiam no tamanho do corpo perdem completamente isso (o corpo não é o pai deslocado de tal conteúdo, a menos que esteja em si). E essas respostas checam $( document ).width()e .height()caem na detecção de bugs do tamanho do documento pelo jQuery .
• Confiar window.innerWidth, se o navegador suportar, faz com que seu código falhe na detecção de barras de rolagem em navegadores móveis, onde a largura da barra de rolagem é geralmente igual a 0. Elas são mostradas temporariamente como uma sobreposição e não ocupam espaço no documento . O zoom no celular também se torna um problema dessa maneira (longa história).
• A detecção pode ser iniciada quando as pessoas definem explicitamente o estouro de ambos os elementos htmle bodypara valores não padrão (o que acontece, então, é um pouco envolvido - veja esta descrição ).
• Na maioria das respostas, o preenchimento do corpo, bordas ou margens não são detectados e distorcem os resultados.

Passei mais tempo do que eu imaginava em encontrar uma solução que "simplesmente funcionasse" (tosse). O algoritmo que criei agora faz parte de um plugin, jQuery.isInView , que expõe um .hasScrollbarmétodo . Dê uma olhada na fonte, se desejar.

Em um cenário em que você tem controle total da página e não precisa lidar com CSS desconhecido, o uso de um plug-in pode ser um exagero - afinal, você sabe quais casos extremos se aplicam e quais não. No entanto, se você precisar de resultados confiáveis ​​em um ambiente desconhecido, não acho que as soluções descritas aqui sejam suficientes. É melhor usar um plug-in bem testado - o meu ou qualquer outro.

Este fez obras para mim:

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

Para o corpo, basta usar hasVerticalScroll().

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

Estranhamente, nenhuma dessas soluções informa se uma página tem uma barra de rolagem vertical.

window.innerWidth - document.body.clientWidthfornecerá a largura da barra de rolagem. Isso deve funcionar em qualquer coisa IE9 + (não testada nos navegadores menores). (Ou, para responder estritamente à pergunta,!!(window.innerWidth - document.body.clientWidth)

Por quê? Digamos que você tenha uma página em que o conteúdo seja mais alto que a altura da janela e o usuário possa rolar para cima / baixo. Se você estiver usando o Chrome em um Mac sem o mouse conectado, o usuário não verá uma barra de rolagem. Conecte um mouse e uma barra de rolagem aparecerá. (Observe que esse comportamento pode ser substituído, mas esse é o AFAIK padrão).

Eu encontrei a solução vanila

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

Este lhe dirá se você tem uma barra de rolagem ou não. Incluí algumas informações que podem ajudar na depuração, que serão exibidas como um alerta JavaScript.

Coloque isso em uma tag de script, após a tag do corpo de fechamento.

Escrevi uma versão atualizada da resposta de Kees C. Bakker:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

A função retorna true ou false dependendo se a página possui uma barra de rolagem vertical ou não.

Por exemplo:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

eu uso

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

Basta comparar a largura do elemento raiz dos documentos (ou seja, elemento html) com a parte interna da janela:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

Se você também precisa saber a largura da barra de rolagem:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

Outras soluções não funcionaram em um dos meus projetos e acabei verificando a propriedade css do estouro

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

mas só funcionará se a barra de rolagem aparecer desaparecer, alterando o suporte. Não funcionará se o conteúdo for igual ou menor que a janela.