Olá! Continuando com o tópico desta lição, examinaremos um problema como rolar uma página da web e manipular o tamanho do navegador. Como você pode encontrar a largura do navegador? Como faço para rolar uma página da web usando JavaScript? Acho que você encontrará as respostas a essas perguntas neste tutorial.
Largura / altura da parte visível da janela do navegador
As propriedades clientWidth / Height para um elemento são exatamente a largura / altura da área visível da janela.
Não window.innerWidth / Height
Deve-se observar que todos os navegadores, exceto o IE8-, também podem oferecer suporte às propriedades window.innerWidth / innerHeight. Eles mantêm o tamanho da janela atual.
Qual é a diferença? Você pergunta. Certamente é pequeno, mas extremamente importante.
As propriedades clientWidth / Height, se houver uma barra de rolagem, retornarão exatamente a largura / altura dentro dela, que está 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:
Alert (window.innerWidth); // alerta de largura total da janela (document.documentElement.clientWidth); // largura menos rolagem
Normalmente, estamos interessados \u200b\u200bapenas na largura da janela disponível, por exemplo, para desenhar algo, ou seja, sem a barra de rolagem. Portanto, documentElement.clientWidth é freqüentemente usado.
Largura / altura da página da web com rolagem
Teoricamente, a parte visível da página é documentElement.clientWidth / Height, mas o tamanho total incluindo a barra de rolagem é semelhante a documentElement.scrollWidth / scrollHeight.
Isso é verdade para todos os elementos comuns.
Mas, para uma página com essas propriedades, pode haver um problema ao rolar, ou seja, não é. Nesse caso, eles não funcionam corretamente. Devo dizer que nos navegadores Chrome / Safari e Opera, na ausência de uma barra de rolagem, o valor de documentElement.scrollHeight neste caso pode ser ainda menor do que documentElement.clientHeight, o que, é claro, parece algo não ló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 levando o máximo dessas várias propriedades:
Var scrollVisota \u003d Math.max (document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert ("Altura com rolagem:" + scrollVisota);
Obtendo o pergaminho atual
Se for um elemento regular, a rolagem atual pode ser obtida em scrollLeft / scrollTop.
E a página?
O ponto é que a maioria dos navegadores manipulará corretamente uma solicitação para documentElement.scrollLeft / Top, no entanto, Safari / Chrome / Opera tem erros que fazem com que você use document.body.
Bem, para solucionar esse problema por completo, você pode usar as propriedades window.pageXOffset / pageYOffset:
Alerta ("Rolagem atual a partir do topo:" + window.pageYOffset); alert ("Rolagem atual para a esquerda:" + window.pageXOffset);
Estas são todas as propriedades:
- IE8 não compatível
- Eles só podem ser lidos e não podem ser alterados.
Se o IE8 não se importar, basta usar essas propriedades.
Uma versão para vários navegadores com o IE8 em mente fornece uma versão no documentElement:
Var scrollTop \u003d window.pageYOffset || document.documentElement.scrollTop; alert ("Rolagem atual:" + scrollTop);
Alterando a rolagem da página: scrollTo, scrollBy, scrollIntoView
Para rolar uma página usando JavaScript, todos os seus elementos devem estar totalmente carregados.
Em elementos comuns, scrollTop / scrollLeft pode, em princípio, ser alterado, e o elemento irá rolar ao mesmo tempo.
Ninguém te incomoda para fazer o mesmo com a página. Em todos os navegadores, exceto Chrome / Safari / Opera, você pode rolar simplesmente definindo document.documentElement.scrollTop, e nos especificados, você deve usar document.body.scrollTop para isso. E tudo vai funcionar muito bem.
Mas há outra solução universal - métodos especiais para rolar a página window.scrollBy (x, y) e window.scrollTo (pageX, pageY).
- O método scrollBy (x, y) irá 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 a todo o documento. Será equivalente a definir as propriedades scrollLeft / scrollTop. Para rolar para o início do documento, basta especificar as coordenadas (0,0).
scrollIntoView
O método elem.scrollIntoView (top) deve ser chamado em um elemento e rola a página para que o elemento fique na parte superior se top for true e na parte inferior se top for false, respectivamente. Além disso, se este parâmetro superior não for especificado, será igual a verdadeiro.
Impedir rolagem
Existem situações em que é necessário tornar um documento "não rolante". Por exemplo, ao mostrar uma grande caixa de diálogo acima do documento - para que o visitante possa rolar por aquela janela, mas não o próprio documento.
Para evitar a rolagem da página, basta definir a propriedade document.body.style.overflow \u003d "hidden".
Em vez de document.body, pode haver qualquer elemento que você deseja impedir a rolagem.
Mas a desvantagem desse método é que a própria barra de rolagem desaparece. Se ocupasse uma certa largura, então agora, consequentemente, essa largura será liberada, e o conteúdo da página será expandido, o texto irá "pular", ocupando todo o espaço liberado.
Resultados
- Para obter o tamanho da parte visível da janela, use a propriedade: document.documentElement.clientWidth / Height
- Para obter as dimensões de rolagem da página, use: var scrollHeight \u003d Math.max (document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement. clientHeight);
Ao desenvolver interfaces para sites, geralmente você precisa usar JavaScript. Claro que isso é ruim, mas em algumas situações é simplesmente impossível implementar tudo completamente em CSS.
A necessidade mais frequente para mim surge em determinar a largura ou altura da janela do navegador para futuras manipulações. Todas as informações sobre este tópico estão sob o corte.
Onde isso pode ser útil?
Não falarei por todos, mas é útil para mim ao integrar com Textpattern de todos os tipos de galerias, controles deslizantes, etc., onde tudo é escrito em JS puro. Coisas que estão fortemente ligadas ao JS são raras, mas ainda ocorrem, e é por isso que este post apareceu.
Você pode defini-lo de 2 maneiras: JS ou jQuery.
Determinando largura ou altura com JS puro
Este é o método preferido, já que quase todo navegador moderno possui um mecanismo JavaScript. Até mesmo navegadores móveis aprenderam a trabalhar com JS.
Claro, existe a possibilidade de o usuário desabilitar manualmente o processamento de JS no navegador, mas me parece que não existem tantas "pessoas estranhas" assim, já que quase todo site usa algum tipo de solução que funciona em JS .
Em JS para definir dimensões da tela, você precisa usar as funções:
Screen.width // Screen Width screen.height // Screen Height
Este é um caso de uso inútil:
Se você usar isso para posicionar alguns elementos na página, a melhor solução seria usar não as dimensões da tela, mas dimensões da janela do navegador... Em JS, é feito assim:
Document.body.clientWidth // Largura do navegador document.body.clientHeight // Altura do navegador
Assim, aqui está um caso de uso sem sentido:
Dimensionamento do navegador com jQuery
Pessoalmente, uso o método descrito abaixo. Este método só funciona se você já tiver conectado a biblioteca jQuery em seu site. Em todos os sites que tenho que fazer esta biblioteca é o padrão de fato.
Para usar jQuery para nossa tarefa, você precisa usar o código:
$ (janela) .width (); // Largura do navegador $ (window) .height (); // Altura do navegador
E no final, gostaria de dizer que se houver uma oportunidade de fazer sem JS e jQuery em geral ou em parte, então isso é exatamente o que você precisa fazer.
Compartilhe nas redes sociais redes
Para que serve? Por exemplo, temos um belo layout de site, que mostra toda a sua beleza apenas em uma resolução de, digamos, 1600 x 1200. Por exemplo, ele tem um belo cabeçalho muito grande. 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? Possivelmente. Então, por que não fazer tal coisa que, no topo do navegador / tela, o cabeçalho simplesmente seja cortado e o menu e o resto do site desapareçam? Em, o que você precisa.
Na verdade, eu descrevi um dos exemplos que encontrei na prática (veja a imagem). Resolvi o problema de forma simples - por meio de javascript. Ou talvez através do jQuery, não me lembro. Descreverei os dois métodos aqui.
Em primeiro lugar, a definição de " resolução da tela"e" tamanho da janela do navegador"(já que em alguns artigos houve incidentes - saudai alguns métodos, outros foram propostos, embora em um caso a resolução do navegador tenha sido medida, no outro - a resolução do monitor).
É necessário determinar desde o início o que é mais importante para você. No caso daquele exemplo com o cabeçalho, fui guiado pela resolução da tela (monitor): afinal o site é lindo, se a janela do navegador for reduzida manualmente, deixe que eles expandam o navegador para tela inteira ao visualizar este site (não há nada para eles, por favor - aprox. ed.) Mas, por exemplo, usei a largura e a altura do navegador para ajustar a imagem expandida da galeria jQuery Lightbox.
E depois de ter escolhido, nós escrevemos o código, você pode no cabeçalho do site. Primeiro, um exemplo de segmentação resolução da tela.
Linhas 3-6 - javascript puro, linhas 7-11 - exemplo de jQuery. Os métodos javascript screen.width e screen.height são usados \u200b\u200bpara determinar a largura e a altura. O que as linhas fazem é claro: o primeiro script grava o caminho para o adicional arquivo CSS, e o outro - para o bloco com o identificador total, define a propriedade css "background-position".
Vejamos o segundo exemplo, mas que se concentrará na resolução do navegador. Tudo é igual, os métodos mudaram.
Então, a partir de dois exemplos breve revisão - o que usar para quê:
- screen.width... Define a largura da tela (monitor).
- screen.height... Determina a altura da tela (monitor).
- document.body.clientWidth... Determina a largura do navegador.
- document.body.clientHeight... Determina a altura do navegador.
- $ (janela) .width ()... Define a largura do navegador, mas apenas se jQuery estiver presente.
- $ (janela) .height ()... Determina a altura do navegador, mas apenas se jQuery estiver presente.
É claro que se você estiver usando jQuery, a opção 5 é preferível a 3 e 6 em vez de 4 - eles são simplesmente mais curtos. Bem, então - o sabor e a cor.
No que diz respeito às alturas e larguras de tela específicas do jQuery, eu honestamente não as conheço. Em teoria, deveria haver uma construção do tipo 5-6 linhas, mas de alguma forma não encontrei na prática, parece-me que não são. E não é necessário, screen.width é uma construção bastante curta, é o suficiente.
Sim, também existe $ (document) .width () - determina a largura do documento HTML. O uso prático é um tanto duvidoso. Quem sabe - ficarei feliz se você compartilhar.
Por hoje é isso! Esperamos até o fim de semana e vamos aos kebabs em massa! (a menos que você esteja doente com alguma coisa, como alguém). Boa sorte!
Nesta lição, veremos as propriedades do objeto janela, 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 posição em relação ao canto superior esquerdo da tela do usuário (screenLeft e screenTop) e a rolagem de posições (pageXOffset e pageYOffset).
Propriedades InnerWidth e innerHeight
Eles são projetados para obter o tamanho da área de trabalho visível da janela do navegador. Aqueles. as propriedades innerWidth e innerHeight são para obter os valores de largura e altura da área na qual o documento HTML é exibido. Essas propriedades são somente leitura e retornam valores de pixel.
Por exemplo, para obter a altura e largura da área de trabalho visível da janela do navegador:
Largura da área visível (widthContenArea):
Largura da área visível (heightContenArea):
Propriedades OuterWidth e outerHeight
Eles são projetados para obter o tamanho de toda a janela do navegador, ou seja, incluindo barras de ferramentas, barras de rolagem, barra de status, bordas de janela, etc. As propriedades outerWidth e outerHeight são somente leitura e retornam a largura e a altura da janela, em pixels, respectivamente.
Por exemplo, para obter a altura e largura da janela do navegador:
Largura da janela do navegador (widthWindow):
Altura da janela do navegador (heighWindow):
Propriedades ScreenLeft (screenX) e screenTop (screenY)
O objetivo deles é obter a coordenada do canto superior esquerdo da janela do navegador ou documento em relação ao canto superior esquerdo da tela do usuário.
As propriedades screenLeft e screenTop funcionam no Internet Explorer, e as propriedades screenX e screenY funcionam no Mozilia Firefox. Nos navegadores Chrome, Safari e outros navegadores semelhantes, você pode usar as propriedades screenLeft e screenTop e as propriedades screenX e screenY.
Ao usar essas propriedades, esteja ciente do fato de que alguns navegadores podem retornar a coordenada do canto superior esquerdo do documento, e alguns navegadores retornam 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 do canto esquerdo da tela em pixels, respectivamente.
Por exemplo, vamos exibir as coordenadas xey do canto esquerdo da janela do navegador atual (documento) na forma de uma mensagem relativa ao canto superior esquerdo da tela:
Descubra as coordenadas
Propriedades de PageXOffset (scrollX) e pageYOffset (scrollX)
Eles são projetados para obter o número de pixels que o documento rolou 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 respectivamente às propriedades pageXOffset e pageYOffset. 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).
Descubra a posição das barras de rolagem
