¿Cómo determinar si aparece una barra de desplazamiento?

Para determinar si aparece una barra de desplazamiento horizontal en un div, solo necesitamos determinar si scrollWidth es mayor que clientWidth.

Cuando el borde es 0, use offsetHeight - clientHeight para obtener el ancho de la barra de desplazamiento horizontal (si corresponde).

Para determinar si aparece una barra de desplazamiento vertical en un div, solo necesitamos determinar si scrollHeight es mayor que clientHeight.

Cuando el borde es 0, use offsetWidth - clientWidth para obtener el ancho de la barra de desplazamiento vertical (si corresponde).

Sin embargo, en el navegador IE, en algunos casos especiales, aunque scrollHeight gt; clientHeight (o scrollWidth gt; clientWidth), es posible que la barra de desplazamiento no aparezca.

Descubrimos que en este caso especial, aunque el scrollHeight del elemento principal (258) > clientHeight (257) y la altura del contenido real es 257.92999267578125, de hecho el elemento principal debería tener barras de desplazamiento, pero en De hecho, no se muestra ninguna barra de desplazamiento en el navegador IE. También podemos derivar esto del offsetWidth (840) - clientWidth (840) = 0 del elemento principal de datos.

Normalmente, podemos usar scrollWidth gt; clientWidth para determinar si aparece una barra de desplazamiento horizontal, scrollHeight gt; clientHeight para determinar si aparece una barra de desplazamiento vertical.

Cuando necesitamos más precisión (no móvil y sin desbordamiento: oculto o superpuesto) o queremos obtener el ancho de la barra de desplazamiento, podemos usar offsetHeight - clientHeight (barra de desplazamiento horizontal) o offsetWidth - clientWidth (barra de desplazamiento vertical), en este momento no debemos olvidar restar el borde del elemento.

A veces la situación es más complicada. Por ejemplo, el ancho del área de desplazamiento no es fijo. Necesitamos establecer el ancho del área de desplazamiento según si aparece una barra de desplazamiento (por ejemplo, cuando aparece una barra de desplazamiento). Aparece la barra de desplazamiento, agregue botones de clic a la izquierda y a la derecha para cambiar el área de visualización). En este momento necesitamos calcular la suma de los anchos de cada elemento interno para determinar si aparece una barra de desplazamiento.

Aquí se escribe un ejemplo. Echemos un vistazo. El entorno de ejecución es una computadora con Windows y el navegador Chrome.

Las propiedades clientWidth, offsetWidth y scrollWidth se redondearán y devolverán. a números enteros. Cuando se suman varios subelementos, el error será cada vez mayor.

Echemos un vistazo al valor de getComputedStyle

Encontramos que el ancho del contenido es 341.3753 gt y el ancho del elemento principal es 341.375

Hay un pequeño; error de precisión en getComputedStyle.

Echemos un vistazo al ancho obtenido por getBoundingClientRect

Encontramos que el ancho del contenido 341.375 es igual al ancho del elemento padre 341.375.

Usemos getBoundingClientRect aquí, pero...

Acerquemos el navegador a 150 y echemos un vistazo nuevamente

Usamos getBoundingClientRect Calcula el valor

Encontramos que el valor obtenido es 341.3541793823242, que todavía tiene una ligera desviación del valor obtenido del elemento padre 341.35418701171875 (esta desviación puede ser grande o pequeña).

Por lo tanto, introducimos un pequeño valor ignorado de 0,1, pensando que cuando el ancho del elemento principal 0,1 es mayor que el resultado del cálculo del ancho del contenido, no hay barra de desplazamiento.

Documentación de referencia:

MDN Element.clientWidth

MDN HTMLElement.offsetWidth

MDN Element.scrollWidth

MDN Element.clientHeight

MDN HTMLElement.offsetHeight

MDN Element.scrollHeight