javascript - posicion - scroll vertical automatico jquery

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

Question

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?

Answer 1

Curiosamente, ninguna de estas soluciones te dice si una página tiene una barra de desplazamiento vertical.

window.innerWidth - document.body.clientWidth le dará el ancho de la barra de desplazamiento. Esto debería funcionar en cualquier cosa IE9 + (no probado en los navegadores menores). (O para responder estrictamente a la pregunta, !!(window.innerWidth - document.body.clientWidth)

¿Por qué? Supongamos que tiene una página donde el contenido es más alto que el alto de la ventana y el usuario puede desplazarse hacia arriba o hacia abajo. Si usa Chrome en una Mac sin mouse conectado, el usuario no verá una barra de desplazamiento. Conecte un mouse y aparecerá una barra de desplazamiento. (Tenga en cuenta que este comportamiento puede ser anulado, pero ese es el AFAIK predeterminado).

Answer 2

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

Answer 3

Escribí una versión actualizada de la respuesta 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()
}

La función devuelve verdadero o falso dependiendo de si la página tiene una barra de desplazamiento vertical o no.

Por ejemplo:

const hasVScroll = hasVerticalScroll(document.querySelector(''body''))
if (hasVScroll) {
console.log(''HAS SCROLL'', hasVScroll)
}

Answer 4

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() .

Answer 5

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

Answer 6

Otras soluciones no funcionaron en uno de mis proyectos y he terminado revisando la propiedad overflow css

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

pero solo funcionará si la barra de desplazamiento aparece desapareciendo al cambiar el prop no funcionará si el contenido es igual o más pequeño que la ventana.

Answer 7

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 que comprueban $( document ).width() y .height() son presa de la detección de errores de jQuery del tamaño del documento .
• Confiar en 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 los elementos html y body en valores no predeterminados (lo que ocurre entonces es un poco complicado: consulte 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 se me ocurrió ahora es parte de un complemento, jQuery.isInView , que expone un método .hasScrollbar . Eche un vistazo a 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.

Answer 8

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. La variable hasVScroll 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");

Answer 9

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

Éste te dirá si tienes una barra de desplazamiento o no. He incluido algo de información que puede ayudar con la depuración, que se mostrará como una alerta de JavaScript.

Coloque esto en una etiqueta de script, después de la etiqueta de cierre del cuerpo.

Answer 10

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

Answer 11

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