Cómo determinar si la página tiene barras de desplazamiento a través de JS
Esta vez les mostraré cómo determinar si una página tiene barras de desplazamiento a través de JS, y cuáles son las precauciones para determinar si una página tiene barras de desplazamiento a través de JS. Aquí hay un caso práctico. echa un vistazo.
Prólogo
En el proceso de escribir un complemento recientemente, necesito usar JS para determinar si hay una barra de desplazamiento. Busqué y descubrí que los métodos son básicamente los mismos. Lo mismo, pero son un poco detallados y el código no es lo suficientemente conciso. Finalmente, escribí un método relativamente simple haciendo referencia a diferentes métodos. Al juzgar la barra de desplazamiento, también debes calcular el ancho de la barra de desplazamiento. Lo compartiré contigo a través de este artículo.
¿Por qué necesitamos juzgar la barra de desplazamiento?
La necesidad de juzgar la barra de desplazamiento se usa a menudo en los complementos de ventanas emergentes, porque la mayoría de las ventanas emergentes agregue el atributo overflow: oculto. Si la página es relativamente larga, si es así, la página temblará después de agregar este atributo.
Para mejorar la experiencia del usuario, agregue el atributo de margen izquierdo para compensar la posición de la barra de desplazamiento después del desbordamiento: oculto al determinar si hay una barra de desplazamiento.
Cómo determinar si hay una barra de desplazamiento
De hecho, solo se necesita una línea de JS para probar la compatibilidad con IE7
Generalmente, use document. Se puede juzgar body.scrollHeight > window.innerHeight.
Pero en IE7 e IE8, window.innerHeight está subdefinido, por lo que para ser compatible con IE7 e IE8, debe usar la propiedad document.documentElement.clientHeight para calcular la altura de la ventana.
El método para calcular el ancho de la barra de desplazamiento
También toma la ventana emergente como ejemplo, porque las barras de desplazamiento de IE 10 y superiores y los navegadores móviles son estilos transparentes. que no ocupan el ancho de la página (donde los navegadores IE 10 o superiores pueden restaurar el estilo de la barra de desplazamiento original a través de las propiedades CSS), por lo que para mejorar aún más la experiencia del usuario, también necesitamos calcular el ancho de la barra de desplazamiento y agregue un valor de margen izquierdo razonable según la situación.
El método para calcular el ancho de la barra de desplazamiento es relativamente simple. Cree un nuevo elemento p con una barra de desplazamiento y obtengalo a través de la diferencia entre el ancho de desplazamiento y el ancho del cliente que aprenderé de. método en Magnific-popup aquí
Resumen
Puede que no sea difícil implementar una función usando JS, pero como programadores, siempre deben pensar en cómo implementar esta función de manera más simple. y elegantemente, y centrarse siempre en mejorar la experiencia del usuario. Para el juicio condicional, tal vez diez líneas de juicio lógico solo requieran una línea. Me ha impresionado profundamente recientemente y debo ser bueno usando expresiones ternarias en lugar de if...else para simplificar el código.
Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada:
Cómo utilizar el mecanismo de carga de código fuente del paquete web
Cómo utilizar js+css para lograr efectos de escritura