Cómo determinar la altura de una página js. Cómo determinar la "resolución de pantalla" y el "tamaño de la ventana del navegador" en JavaScript y jQuery. Cambiar el desplazamiento de la página: scrollTo, scrollBy, scrollIntoView

Al desarrollar interfaces para sitios web, a menudo es necesario utilizar JavaScript. Por supuesto, esto es malo, pero en algunas situaciones es simplemente imposible implementar todo completamente en CSS.

La necesidad más común que tengo es determinar el ancho o alto de la ventana del navegador para su posterior manipulación. Debajo del corte está toda la información sobre este tema.

¿Dónde puede resultar útil esto?

No hablaré por todos, pero esto me resulta útil para integrar con Textpattern todo tipo de galerías, controles deslizantes, etc., donde todo está escrito en JS puro. Las cosas que están estrictamente relacionadas con JS son raras, pero ocurren, razón por la cual apareció esta nota.

Puedes definirlo de 2 maneras: JS o jQuery.

Determinar el ancho o alto usando JS puro

Este es el método preferido, ya que casi todos los navegadores modernos tienen un motor JavaScript. Incluso los navegadores móviles han aprendido a trabajar con JS.

Por supuesto, existe la posibilidad de que el propio usuario desactive el procesamiento JS en el navegador, pero me parece que no hay muchas "personas extrañas" así, ya que casi todos los sitios utilizan algún tipo de solución que se ejecuta en JS.

En JS, para determinar el tamaño de la pantalla, es necesario utilizar las funciones:

Screen.width //Ancho de pantalla screen.height //Alto de pantalla

Aquí hay un ejemplo de uso inútil:

alerta(pantalla.ancho+"x"+pantalla.alto);

Si utiliza esto para colocar algunos elementos en la página, la mejor solución sería utilizar las dimensiones de la ventana del navegador en lugar del tamaño de la pantalla. En JS esto se hace así:

Document.body.clientWidth //Ancho del navegador document.body.clientHeight //Alto del navegador

En consecuencia, he aquí un ejemplo de uso sin sentido:

alerta(document.body.clientWidth+"x"+document.body.clientHeight);

Dimensionamiento del navegador con jQuery

Personalmente, utilizo el método que se describe a continuación. Este método sólo funciona si ha instalado previamente la biblioteca jQuery en su sitio. En todos los sitios que tengo que crear, esta biblioteca es un estándar de facto.

Para usar jQuery para nuestra tarea, necesitamos usar el código:

$(ventana).width(); //Ancho del navegador $(ventana).height(); //altura del navegador

Y al final, me gustaría decir que si es posible prescindir de JS y jQuery en su totalidad o parcialmente, entonces esto es exactamente lo que hay que hacer.

Compartir en las redes sociales redes

¿Para qué es esto? Por ejemplo, tenemos un hermoso diseño de sitio web, que muestra toda su belleza sólo con una resolución de, digamos, 1600 por 1200. Por ejemplo, tiene un hermoso encabezado muy grande. ¿Qué sucede si una persona visita el sitio con una resolución de 1024 por 768? Sí, sólo será visible el sombrero. ¿No es bueno? Tal vez. Entonces, ¿por qué no hacer algo que, dada la altura del navegador/pantalla, el encabezado simplemente se corte y el menú y el resto del sitio desaparezcan? Vaya, justo lo que necesitas.

De hecho, describí uno de los ejemplos que encontré en la práctica (ver imagen). Resolví el problema de forma sencilla, a través de JavaScript. O quizás a través de jQuery, no lo recuerdo. Describiré ambos métodos aquí.

En primer lugar, es necesario distinguir entre las definiciones de "resolución de pantalla" y "tamaño de la ventana del navegador" (ya que en algunos artículos hubo incidentes: criticaron algunos métodos, propusieron otros, aunque en un caso midieron la resolución del navegador, en el otro, la resolución del monitor).

Debe determinar desde el principio qué es más importante para usted. En el caso de ese ejemplo con el encabezado, me guié por la resolución de la pantalla (monitor): después de todo, el sitio es hermoso, si la ventana del navegador se reduce manualmente, entonces déjeles expandir su navegador a la pantalla completa cuando vean esto. sitio (no tienen nada que hacer, ya sabes - Nota del editor). Pero, por ejemplo, para ajustar la imagen expandida de la galería jQuery Lightbox, utilicé el ancho y el alto del navegador.

Y después de haber elegido, escribimos el código, tal vez en el encabezado del sitio. Primero un ejemplo centrado en la resolución de la pantalla.

Las líneas 3-6 son puramente javascript, las líneas 7-11 son un ejemplo en jQuery. Para determinar el ancho y el alto, se utilizan los métodos de JavaScript screen.width y screen.height. Lo que hacen las líneas es claro: el primer script especifica la ruta a archivo adicional CSS, y el otro establece la propiedad CSS "posición de fondo" para el bloque con el identificador total.

Veamos el segundo ejemplo, pero que se centrará en la resolución del navegador. Todo sigue igual, los métodos han cambiado.

Entonces, a partir de dos ejemplos, una breve descripción de qué usar y para qué:

ancho.de.pantalla. Define el ancho de la pantalla (monitor).

altura.de.pantalla Determina la altura de la pantalla (monitor).

documento.body.clientWidth. Define el ancho del navegador.

documento.body.clientHeight . Define la altura del navegador.

$(ventana).width() . Define el ancho del navegador, pero sólo si jQuery está presente.

$(ventana).altura() . Define la altura del navegador, pero sólo si jQuery está presente.

Está claro que si usa jQuery, entonces la opción 5 es preferible a la 3 y la 6 a la 4; simplemente son más cortas. Bueno, depende del sabor y el color.

En cuanto a las entradas específicas para el alto y ancho de la pantalla para jQuery, para ser honesto, no las conozco. En teoría, debería haber una estructura del tipo 5-6 líneas, pero de alguna manera no la he encontrado en la práctica, me parece que no existen. Y no es necesario, screen.width es una construcción lo suficientemente corta, es suficiente.

Sí, también existe $(document).width(): determina el ancho del documento HTML. Su uso en la práctica es algo dudoso. Quién sabe, me alegrará que lo compartas.

¡Eso es todo por hoy! ¡Aguardemos hasta el fin de semana y vayamos en masa a las barbacoas! (a menos que esté enfermo con algo, como algo - nota del editor). ¡Buena suerte!

¡Hola! Continuando con el tema de esta lección, veremos la cuestión del desplazamiento de una página web y la manipulación del tamaño del navegador. ¿Cómo puedes encontrar el ancho del navegador? ¿Cómo desplazar una página web usando JavaScript? Creo que encontrarás las respuestas a estas preguntas en esta lección.

Ancho/alto de la parte visible de la ventana del navegador Las propiedades clientWidth/Height para un elemento son exactamente el ancho/alto del área visible de la ventana.


No ventana.ancho/alto interior

Cabe señalar que todos los navegadores excepto IE8 también pueden admitir las propiedades window.innerWidth/innerHeight. ellos salvan tamaño actual ventana.

¿Cual es la diferencia? Usted pregunta. Es pequeño, por supuesto, pero extremadamente importante.

Las propiedades clientWidth/Height, si hay una barra de desplazamiento, devolverán exactamente el ancho/alto dentro de ella, disponible para todo el documento, y window.innerWidth/Height ignorará su presencia.

Si el lado derecho de la página está ocupado por una barra de desplazamiento, estas líneas mostrarán cosas diferentes:

Alerta (ventana.innerWidth); // todo el ancho de la ventana alert(document.documentElement.clientWidth); // ancho menos desplazamiento

Normalmente solo nos interesa el ancho disponible de la ventana, por ejemplo, para dibujar algo, es decir, menos la barra de desplazamiento. Por lo tanto, a menudo se utiliza documentElement.clientWidth.

Ancho/alto de una página web teniendo en cuenta el desplazamiento

Sí, en teoría, la parte visible de la página es documentElement.clientWidth/Height, pero el tamaño completo, incluida la barra de desplazamiento, es, por analogía, documentElement.scrollWidth/scrollHeight.

Esto es válido para todos los elementos regulares.

Pero para una página con estas propiedades, puede surgir un problema cuando el desplazamiento está presente o no. En este caso no funcionan correctamente. Hay que decir que en Navegadores Chrome/ Safari y Opera, en ausencia de una barra de desplazamiento, el valor de documentElement.scrollHeight en este caso puede ser incluso menor que documentElement.clientHeight, lo que, por supuesto, parece algo ilógico

Este problema puede ocurrir específicamente para documentElement.

Pero puede determinar de manera confiable el tamaño de la página teniendo en cuenta el desplazamiento simplemente tomando el máximo de estas propiedades:

Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Altura incluido el desplazamiento: " + scrollVisota);

Obteniendo el desplazamiento actual

Si un elemento normal tiene un desplazamiento actual, puede obtenerlo en scrollLeft/scrollTop.

Entonces ¿qué pasa con la página?

El punto es que la mayoría de los navegadores manejarán una solicitud a documentElement.scrollLeft/Top correctamente, pero Safari/Chrome/Opera tiene errores que requieren que uses document.body.

Bueno, para solucionar este problema por completo, puedes usar las propiedades window.pageXOffset/pageYOffset:

Alert("Desplazamiento superior actual: " + window.pageYOffset); alert("Desplazamiento izquierdo actual: " + window.pageXOffset);

Estas son todas las propiedades:

• No compatible con IE8-
• Sólo se pueden leer y no se pueden cambiar.

Si IE8 no importa, entonces simplemente usamos estas propiedades.

Una opción para varios navegadores que tiene en cuenta IE8 proporciona una opción en documentElement:

Var scrollTop = ventana.páginaYOffset || document.documentElement.scrollTop; alert("Desplazamiento actual: " + desplazamientoTop);

Cambiar el desplazamiento de la página: scrollTo, scrollBy, scrollIntoView

Para desplazarse por una página usando JavaScript, todos sus elementos deben estar completamente cargados.

En elementos normales, scrollTop/scrollLeft se puede, en principio, cambiar y el elemento se desplazará.

Nadie te impide hacer lo mismo con la página. En todos los navegadores excepto Chrome/Safari/Opera, puedes desplazarte simplemente configurando document.documentElement.scrollTop, y en estos navegadores debes usar document.body.scrollTop para esto. Y todo funcionará genial.

Pero existe otra solución universal: los métodos especiales de desplazamiento de páginas window.scrollBy(x,y) y window.scrollTo(pageX,pageY).

• El método scrollBy(x,y) desplazará la página en relación con sus coordenadas actuales.
• El método scrollTo(pageX,pageY) desplaza la página hasta las coordenadas especificadas en relación con todo el documento. Será equivalente a configurar las propiedades scrollLeft/scrollTop. Para desplazarse al principio del documento, sólo necesita especificar las coordenadas (0,0).

desplácese a la vista

Se debe llamar al método elem.scrollIntoView(top) en el elemento y desplazar la página para que el elemento esté en la parte superior si top es verdadero y en la parte inferior si top es falso. Además, si no se especifica este parámetro superior, será igual a verdadero.

Antidesplazamiento

Hay situaciones en las que es necesario hacer que un documento sea "no desplazable". Por ejemplo, mostrar un cuadro de diálogo grande encima de un documento para que el visitante pueda desplazarse por el cuadro de diálogo pero no por el documento en sí.

Para evitar el desplazamiento de la página, simplemente configure la propiedad document.body.style.overflow = "oculta".

En lugar de document.body, puede haber cualquier elemento cuyo desplazamiento deba desactivarse.

Pero la desventaja de este método es que la barra de desplazamiento desaparece. Si ocupaba un cierto ancho, ahora este ancho se liberará y el contenido de la página se expandirá, el texto “saltará”, ocupando todo el espacio libre.

Resultados

• Para obtener las dimensiones de la parte visible de la ventana, use la propiedad: document.documentElement.clientWidth/Height
• Para obtener las dimensiones de la página teniendo en cuenta el desplazamiento, utilice: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement.clientHeight);

En esta lección, veremos las propiedades del objeto de ventana, con el que puede obtener las dimensiones del área de trabajo de la ventana del navegador (ancho interior y altura interior), las dimensiones de la ventana en sí (ancho exterior y altura exterior), su ubicación relativa a la esquina superior izquierda de la pantalla del usuario (screenLeft y screenTop) y posiciones de desplazamiento (pageXOffset y pageYOffset).

Propiedades de ancho interno y alto interno

Están diseñados para obtener las dimensiones del área de trabajo visible de la ventana del navegador. Aquellos. Las propiedades InnerWidth e InnerHeight tienen como objetivo obtener el ancho y alto del área en la que se muestra el documento HTML. Estas propiedades son de solo lectura y devuelven valores de píxeles.

Por ejemplo, obtenga la altura y el ancho del área de trabajo visible de la ventana del navegador:

Ancho del área de visualización visible (widthContenArea):

Ancho del área de visualización visible (heightContenArea):

// ancho de la ventana visible (para todos los navegadores excepto explorador de Internet 8) var anchoContenArea = ventana.innerWidth; // altura de la ventana visible (para todos los navegadores excepto Internet Explorer 8) var heightContenArea = window.innerHeight; // ancho de la ventana visible (para Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || documento.body.clientWidth; // altura de la ventana visible (para Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || documento.body.clientHeight; // ancho de la ventana visible (para todos los navegadores) widthContenArea1 = window.innerWidth || documento.documentElement.clientWidth || documento.body.clientWidth; // altura de la ventana gráfica visible (para todos los navegadores) heightContenArea1 = window.innerHeight || documento.documentElement.clientHeight || documento.body.clientHeight; document.getElementById("widthContenArea").innerHTML = anchoContenArea; document.getElementById("heightContenArea").innerHTML = alturaContenArea;

Propiedades de ancho exterior y alto exterior

Están diseñados para obtener las dimensiones de toda la ventana del navegador, es decir. incluidas barras de herramientas, barras de desplazamiento, barra de estado, bordes de ventanas, etc. Las propiedades exteriorWidth y exteriorHeight son de solo lectura y devuelven el ancho y alto de la ventana en píxeles, respectivamente.

Por ejemplo, obtenga el alto y el ancho de la ventana del navegador:

Ancho de la ventana del navegador (widthWindow):

Altura de la ventana del navegador (heighWindow):

// ancho de la ventana del navegador var widthWindow = window.outerWidth; // altura de la ventana del navegador var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

Propiedades screenLeft (screenX) y screenTop (screenY)

Están diseñados para obtener las coordenadas de la esquina superior izquierda de la ventana del navegador o del documento en relación con la esquina superior izquierda de la pantalla del usuario.

En este caso, las propiedades screenLeft y screenTop funcionan en Internet Explorer, y las propiedades screenX y screenY funcionan en Mozilia Firefox. En Chrome, Safari y otros navegadores similares, puede utilizar las propiedades screenLeft y screenTop, así como las propiedades screenX y screenY.

Al utilizar estas propiedades, debe tener en cuenta el hecho de que algunos navegadores pueden devolver las coordenadas de la esquina superior izquierda del documento y algunos navegadores pueden devolver las coordenadas de la esquina superior izquierda de la ventana. Las propiedades screenleft (screenX) y screenTop (screenY) son de solo lectura y devuelven las distancias horizontal y vertical relativas a la esquina izquierda de la pantalla en píxeles, respectivamente.

Por ejemplo, mostremos en forma de mensaje las coordenadas xey de la esquina izquierda de la ventana actual del navegador (documento) en relación con la esquina superior izquierda de la pantalla:

function windowXY() ( // Usando las propiedades screenleft y screenTop, obtenemos las coordenadas de la ubicación de la ventana (documento) var winX = window.screenLeft; var winY = window.screenTop; // Usando las propiedades screenX y screenY, obtenemos las coordenadas de la ubicación de la ventana (documento) winX = window.screenX; winY = window.screenY; // Obtener las coordenadas de la ubicación de la ventana (documento) en todos los navegadores winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Coordenadas de la ventana relativas a la pantalla del usuario: X = " + winX + ", Y = " + winY + "."); ) Descubra el coordenadas

propiedades pageXOffset (scrollX) y pageYOffset (scrollX)

Están diseñados para obtener el número de píxeles que se ha desplazado el documento en dirección horizontal (pageXOffset) o vertical (pageYOffset) en relación con la esquina superior izquierda de la ventana. Las propiedades scrollX y scrollY son equivalentes a las propiedades pageXOffset y pageYOffset, respectivamente. Estas propiedades son de sólo lectura.

Por ejemplo, muestre en un mensaje el número de píxeles que se desplazó el documento en las direcciones horizontal (pageXOffset) y vertical (pageYOffset).

function scrollContent() ( //Desplaza el documento actual 200px hacia la derecha y hacia abajo window.scrollBy(200,200); //Obtiene los valores usando las propiedades pageXOffset y pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Obtener los valores mediante los cuales el documento se desplazó horizontal o verticalmente para Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Para todos los navegadores: winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Número de píxeles por los cuales se desplazó el documento horizontal y verticalmente: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Descubra las posiciones de las barras de desplazamiento.