Como determinar a altura de uma página js. Como determinar a “resolução da tela” e o “tamanho da janela do navegador” em JavaScript e jQuery. Alterando a rolagem da página: scrollTo, scrollBy, scrollIntoView
Ao desenvolver interfaces para sites, muitas vezes você precisa usar JavaScript. Claro que isso é ruim, mas em algumas situações é simplesmente impossível implementar tudo completamente em CSS.
A necessidade mais comum que tenho é determinar a largura ou altura da janela do navegador para posterior manipulação. Abaixo do corte estão todas as informações sobre este tema.
Onde isso pode ser útil?Não vou falar por todos, mas isso é útil para mim na integração com Textpattern de todos os tipos de galerias, sliders, etc., onde tudo é escrito em JS puro. Coisas que estão estritamente ligadas ao JS são raras, mas ocorrem, e é por isso que esta nota apareceu.
Você pode defini-lo de 2 maneiras: JS ou jQuery.
Determinando largura ou altura usando JS puroEste é o método preferido, já que quase todos os navegadores modernos possuem um mecanismo JavaScript. Até os navegadores móveis aprenderam a trabalhar com JS.
Claro, existe a possibilidade de o próprio usuário desabilitar o processamento de JS no navegador, mas me parece que não existem muitas “pessoas estranhas”, já que quase todos os sites utilizam algum tipo de solução que roda em JS.
Em JS, para determinar tamanhos de tela, você precisa usar as funções:
Screen.width //Largura da tela screen.height //Altura da tela
Aqui está um exemplo de uso inútil:
alerta(tela.largura+"x"+tela.altura);
Se você estiver usando isso para posicionar alguns elementos na página, a melhor solução seria usar as dimensões da janela do navegador em vez dos tamanhos da tela. Em JS isso é feito assim:
Document.body.clientWidth //Largura do navegador document.body.clientHeight //Altura do navegador
Assim, aqui está um exemplo de uso sem sentido:
alerta(document.body.clientWidth+"x"+document.body.clientHeight);
Dimensionamento de navegador com jQueryPessoalmente, uso o método descrito abaixo. Este método só funciona se você já instalou a biblioteca jQuery em seu site. Em todos os sites que tenho que criar, esta biblioteca é um padrão de fato.
Para usar jQuery em nossa tarefa, precisamos usar o código:
$(janela).largura(); //Largura do navegador $(window).height(); //Altura do navegador
E no final, gostaria de dizer que se é possível prescindir de JS e jQuery em geral ou parcialmente, então é exatamente isso que você precisa fazer.
Compartilhe nas redes sociais redes
Para que serve isso? Por exemplo, temos um lindo layout de site, que mostra toda a sua beleza apenas em uma resolução de, digamos, 1600 por 1200. Por exemplo, ele tem um cabeçalho muito grande e bonito. O que acontece se uma pessoa visitar o site com uma resolução de 1024 por 768? Sim, apenas o chapéu ficará visível. Não é bom? Talvez. Então por que não fazer algo que, dada a altura do navegador/tela, o cabeçalho fosse simplesmente cortado e o menu e o resto do site desaparecessem? Uau, exatamente o que você precisa.
Na verdade, descrevi um dos exemplos que encontrei na prática (ver foto). Resolvi o problema de forma simples - através de javascript. Ou talvez através de jQuery, não me lembro. Descreverei os dois métodos aqui.
Em primeiro lugar, é necessário distinguir entre as definições de “resolução da tela” e “tamanho da janela do navegador” (já que em alguns artigos houve incidentes - criticaram alguns métodos, propuseram outros, embora em um caso mediram a resolução do navegador, no outro - a resolução do monitor).
Você precisa determinar desde o início o que é mais importante para você. No caso daquele exemplo com cabeçalho, me orientei pela resolução da tela (monitor): afinal o site é lindo, se a janela do navegador for reduzida manualmente, então deixe-os expandir o navegador para tela cheia ao visualizar isso site (eles não têm negócios, você sabe - Nota do editor). Mas, por exemplo, para ajustar a imagem expandida da galeria jQuery Lightbox, usei a largura e a altura do navegador.
E depois de escolhido, escrevemos o código, talvez no cabeçalho do site. Primeiro, um exemplo focado na resolução da tela.
As linhas 3 a 6 são puramente javascript, as linhas 7 a 11 são um exemplo em jQuery. Para determinar a largura e a altura, são utilizados os métodos javascript screen.width e screen.height. O que as linhas fazem é claro: o primeiro script especifica o caminho para arquivo adicional CSS, e o outro define a propriedade css “background-position” para o bloco com o identificador total.
Vejamos o segundo exemplo, mas que terá como foco a resolução do navegador. Tudo é igual, os métodos mudaram.
Então, a partir de dois exemplos, uma breve visão geral do que usar e para quê:
É claro que se você usar jQuery, a opção 5 é preferível a 3 e 6 a 4 - elas são simplesmente mais curtas. Bem, depende do sabor e da cor.
Quanto às entradas específicas de altura e largura da tela para jQuery, para ser sincero, não as conheço. Em teoria, deveria haver uma estrutura de 5 a 6 linhas, mas de alguma forma não encontrei isso na prática, parece-me que elas não existem. E não é necessário, screen.width é uma construção curta o suficiente, é o suficiente.
Sim, também existe $(document).width() - determina a largura do documento HTML. O uso na prática é um tanto duvidoso. Quem sabe ficarei feliz se você compartilhar.
Isso é tudo por hoje! Vamos aguentar até o fim de semana e ir em massa aos churrascos! (a menos que você esteja doente com alguma coisa, como alguma - nota do editor). Boa sorte!
Olá! Continuando o tópico desta lição, veremos a questão da rolagem de uma página da web e da manipulação do tamanho do navegador. Como você pode encontrar a largura do navegador? Como rolar uma página da web usando JavaScript? Acho que você encontrará as respostas para essas perguntas nesta lição.
Não window.innerWidth/Height
Deve-se observar que todos os navegadores, exceto o IE8, também podem suportar as propriedades window.innerWidth/innerHeight. Eles salvam tamanho atual janela.
Qual é a diferença? Você pergunta. É pequeno, claro, mas extremamente importante.
As propriedades clientWidth/Height, se houver uma barra de rolagem, retornarão exatamente a largura/altura dentro dela, disponível para todo o documento, e window.innerWidth/Height irá ignorar sua presença.
Se o lado direito da página estiver ocupado por uma barra de rolagem, essas linhas exibirão coisas diferentes:
Alerta(window.innerWidth); // toda a largura da janela alert(document.documentElement.clientWidth); //largura menos rolagem
Normalmente só nos interessa a largura disponível da janela, por exemplo, para desenhar algo, ou seja, menos a barra de rolagem. Portanto, documentElement.clientWidth é frequentemente usado.
Largura/altura de uma página da web levando em consideração a rolagemSim, teoricamente, a parte visível da página é documentElement.clientWidth/Height, mas o tamanho total incluindo a barra de rolagem é, por analogia, documentElement.scrollWidth/scrollHeight.
Isto é verdade para todos os elementos regulares.
Mas para uma página com essas propriedades, pode surgir um problema quando a rolagem está presente ou não. Neste caso eles não funcionam corretamente. Deve-se dizer que em Navegadores Chrome/ Safari e Opera, na ausência de uma barra de rolagem, o valor de documentElement.scrollHeight neste caso pode ser ainda menor que documentElement.clientHeight, o que, claro, parece algo ilógico
Esse problema pode ocorrer especificamente para documentElement.
Mas você pode determinar com segurança o tamanho da página levando em consideração a rolagem, simplesmente pegando o máximo destas diversas propriedades:
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Altura incluindo rolagem: " + scrollVisota);
Obtendo o pergaminho atualSe um elemento regular tiver uma rolagem atual, você poderá obtê-la em scrollLeft/scrollTop.
Então e a página?
A questão é que a maioria dos navegadores irá lidar com uma solicitação para documentElement.scrollLeft/Top corretamente, mas o Safari/Chrome/Opera tem bugs que exigem que você use document.body.
Bem, para contornar esse problema completamente, você pode usar as propriedades window.pageXOffset/pageYOffset:
Alert("Topo de rolagem atual: " + window.pageYOffset); alert("Rolagem esquerda atual: " + window.pageXOffset);
Estas são todas propriedades:
- Não suportado IE8-
- Eles só podem ser lidos e não podem ser alterados.
Se o IE8 não importa, apenas usamos essas propriedades.
Uma opção entre navegadores que leva em conta o IE8 fornece uma opção em documentElement:
Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Rolagem atual: " + scrollTop);
Alterando a rolagem da página: scrollTo, scrollBy, scrollIntoViewPara rolar uma página usando JavaScript, todos os seus elementos devem estar totalmente carregados.
Em elementos regulares, scrollTop/scrollLeft pode, em princípio, ser alterado e o elemento irá rolar.
Ninguém está impedindo você de fazer o mesmo com a página. Em todos os navegadores, exceto Chrome/Safari/Opera, você pode rolar simplesmente configurando document.documentElement.scrollTop, e nesses navegadores você deve usar document.body.scrollTop para isso. E tudo funcionará muito bem.
Mas há outra solução universal - métodos especiais de rolagem de página window.scrollBy(x,y) e window.scrollTo(pageX,pageY).
- O método scrollBy(x,y) rolará a página em relação às suas coordenadas atuais.
- O método scrollTo(pageX,pageY) rola a página até as coordenadas especificadas em relação ao documento inteiro. Será equivalente a definir as propriedades scrollLeft/scrollTop. Para rolar até o início do documento, basta especificar as coordenadas (0,0).
O método elem.scrollIntoView(top) deve ser chamado no elemento e rolar a página para que o elemento fique no topo se top for verdadeiro e na parte inferior se top for falso. Além disso, se este parâmetro superior não for especificado, será igual a verdadeiro.
Anti-rolagemExistem situações em que é necessário tornar um documento “não rolável”. Por exemplo, mostrar uma grande caixa de diálogo acima de um documento para que o visitante possa rolar pela caixa de diálogo, mas não pelo documento em si.
Para evitar a rolagem da página, basta definir a propriedade document.body.style.overflow = “hidden”.
Em vez de document.body pode haver qualquer elemento que precise ser desativado na rolagem.
Mas a desvantagem desse método é que a própria barra de rolagem desaparece. Se ocupasse uma determinada largura, agora essa largura será liberada, e o conteúdo da página será ampliado, o texto “saltará”, ocupando todo o espaço livre.
Resultados- Para obter as dimensões da parte visível da janela, use a propriedade: document.documentElement.clientWidth/Height
- Para obter as dimensões da página levando em consideração a rolagem, use: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement.clientHeight);
Nesta lição, veremos as propriedades do objeto window, com as quais você pode obter as dimensões da área de trabalho da janela do navegador (innerWidth e innerHeight), as dimensões da própria janela (outerWidth e outerHeight), sua localização relativa ao canto superior esquerdo da tela do usuário (screenLeft e screenTop) e posições de rolagem (pageXOffset e pageYOffset).
Propriedades innerWidth e innerHeightEles são projetados para obter as dimensões da área de trabalho visível da janela do navegador. Aqueles. As propriedades innerWidth e innerHeight têm como objetivo obter a largura e a altura da área em que o documento HTML é exibido. Essas propriedades são somente leitura e retornam valores de pixel.
Por exemplo, obtenha a altura e a largura da área de trabalho visível da janela do navegador:
Largura da área de visualização visível (widthContenArea):
Largura da área de visualização visível (heightContenArea):
// largura da viewport visível (para todos os navegadores, exceto Internet Explorer 8) var widthContenArea = window.innerWidth; // altura da janela de visualização visível (para todos os navegadores, exceto Internet Explorer 8) var heightContenArea = window.innerHeight; // largura da janela de visualização visível (para Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // altura da janela de visualização visível (para Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // largura da viewport visível (para todos os navegadores) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // altura da viewport visível (para todos os navegadores) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("larguraContenArea").innerHTML = larguraContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea; Propriedades outerWidth e outerHeightEles são projetados para obter as dimensões de toda a janela do navegador, ou seja, incluindo barras de ferramentas, barras de rolagem, barra de status, bordas de janelas, etc. As propriedades outerWidth e outerHeight são somente leitura e retornam a largura e a altura da janela em pixels, respectivamente.
Por exemplo, obtenha a altura e a largura da janela do navegador:
Largura da janela do navegador (widthWindow):
Altura da janela do navegador (heighWindow):
// largura da janela do navegador var widthWindow = window.outerWidth; //altura da janela do navegador var heightWindow = window.outerHeight; document.getElementById("larguraJanela").innerHTML = larguraJanela; document.getElementById("heightWindow").innerHTML = heightWindow; Propriedades screenLeft (screenX) e screenTop (screenY)Eles são projetados para obter as coordenadas do canto superior esquerdo da janela do navegador ou documento em relação ao canto superior esquerdo da tela do usuário.
Neste caso, as propriedades screenLeft e screenTop funcionam no Internet Explorer, e as propriedades screenX e screenY funcionam no Mozilia Firefox. No Chrome, Safari e outros navegadores semelhantes, você pode usar as propriedades screenLeft e screenTop, bem como as propriedades screenX e screenY.
Ao utilizar estas propriedades, deve-se levar em consideração o fato de que alguns navegadores podem retornar a coordenada do canto superior esquerdo do documento, e alguns navegadores podem retornar a coordenada do canto superior esquerdo da janela. As propriedades screenleft (screenX) e screenTop (screenY) são somente leitura e retornam as distâncias horizontal e vertical relativas ao canto esquerdo da tela em pixels, respectivamente.
Por exemplo, vamos exibir na forma de uma mensagem as coordenadas xey do canto esquerdo da janela atual do navegador (documento) em relação ao canto superior esquerdo da tela:
function windowXY() ( // Usando as propriedades screenleft e screenTop, obtemos as coordenadas da localização da janela (documento) var winX = window.screenLeft; var winY = window.screenTop; // Usando as propriedades screenX e screenY, obtemos as coordenadas da localização da janela (documento) winX = window.screenX; winY = window.screenY; // Obtém as coordenadas da localização da janela (documento) em todos os navegadores winX = window.screenX ?window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Coordenadas da janela relativas à tela do usuário: X = " + winX + ", Y = " + winY + "."); ) Descubra o coordenadas
Eles são projetados para obter o número de pixels pelos quais o documento foi rolado na direção horizontal (pageXOffset) ou vertical (pageYOffset) em relação ao canto superior esquerdo da janela. As propriedades scrollX e scrollY são equivalentes às propriedades pageXOffset e pageYOffset, respectivamente. Essas propriedades são somente leitura.
Por exemplo, exiba em uma mensagem o número de pixels pelos quais o documento foi rolado nas direções horizontal (pageXOffset) e vertical (pageYOffset).
function scrollContent() ( //Rola o documento atual 200px para a direita e para baixo window.scrollBy(200,200); //Obtém os valores usando as propriedades pageXOffset e pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Obter os valores pelos quais o documento foi rolado horizontalmente ou verticalmente para o Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Para todos os navegadores: winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Número de pixels pelos quais o documento foi rolado horizontalmente e verticalmente: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Descubra as posições das barras de rolagem
