Pregunta Detecta si una página tiene una barra de desplazamiento vertical?


Solo quiero un JQ / JS simple para verificar si la página / ventana actual (no un elemento en particular) tiene una barra de desplazamiento vertical.

Google me da cosas que parecen demasiado complejas solo para esta característica básica.

¿Cómo puede hacerse esto?


107
2018-01-27 12:46


origen


Respuestas:


$(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:<");
    }
});

84
2018-01-27 12:52



prueba esto:

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

Sin embargo, esto solo le dirá si la altura de desplazamiento vertical es mayor que la altura del contenido visible. los hasVScroll la variable contendrá verdadero o falso.

Si necesita hacer una verificación más exhaustiva, agregue lo siguiente al código de arriba:

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

66
2018-01-27 12:52



Intenté la respuesta anterior y no parece estar trabajando $ ("body"). Height () no representa necesariamente la altura html completa.

He corregido la solución de la siguiente manera:

// 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:<"); 
} 

40
2018-01-27 13:33



Retomemos esta pregunta de la muerte;) Hay una razón por la cual Google no le da una solución simple. Casos especiales y caprichos del navegador afectan el cálculo, y no es tan trivial como parece.

Desafortunadamente, hay problemas con las soluciones descritas aquí hasta ahora. No pretendo menospreciarlos en absoluto; son excelentes puntos de partida y tocan todas las propiedades clave necesarias para un enfoque más sólido. Pero no recomendaría copiar y pegar el código de ninguna de las otras respuestas porque

  • no capturan el efecto del contenido posicionado de una manera que es confiable entre navegadores. Las respuestas que se basan en el tamaño del cuerpo fallan por completo (el cuerpo no es el padre desplazado de dicho contenido a menos que se ubique por sí mismo). Y esas respuestas revisando $( document ).width() y .height() presa de Detección de errores de jQuery del tamaño del documento.
  • Depender de window.innerWidth, si el navegador lo admite, hace que su código no detecte las barras de desplazamiento en los navegadores móviles, donde el ancho de la barra de desplazamiento es generalmente 0. Se muestran temporalmente como una superposición y no ocupan espacio en el documento. Hacer zoom en un dispositivo móvil también se convierte en un problema de esa forma (historia larga).
  • La detección puede descartarse cuando las personas establecen explícitamente el desbordamiento de ambos html y body elemento a valores no predeterminados (lo que sucede entonces es un poco complicado - ver esta descripción)
  • En la mayoría de las respuestas, el relleno corporal, los bordes o los márgenes no se detectan y distorsionan los resultados.

He pasado más tiempo del que hubiera imaginado para encontrar una solución que "simplemente funciona" (tos). El algoritmo que he encontrado ahora es parte de un complemento, jQuery.isInView, que expone un .hasScrollbar método. Echar un vistazo en la fuente si lo desea.

En un escenario en el que tiene el control total de la página y no tiene que lidiar con CSS desconocido, usar un complemento puede ser excesivo; después de todo, usted sabe qué casos extremos se aplican y cuáles no. Sin embargo, si necesita resultados confiables en un entorno desconocido, entonces no creo que las soluciones descritas aquí sean suficientes. Es mejor utilizar un plugin bien probado: el mío o el de cualquier otro.


15
2018-02-24 14:59



Este sí me funciona:

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 el cuerpo, solo usa hasVerticalScroll().


14
2018-06-27 12:34



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

9
2018-06-10 13:59



Encontré la solución de 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)
}


2
2018-01-14 09:50