Este artigo descreve o método do JS para determinar se a barra de rolagem atingiu a parte inferior ou superior da página. Compartilhe para sua referência. A análise específica é a seguinte:
Frequentemente, vemos muitos sites retornando ao efeito superior é que, quando rolarmos a barra para a posição especificada, ele voltará para o topo, caso contrário, será automaticamente oculto. Deixe -me apresentar os princípios e métodos para implementar esse efeito.
Quando a área visível é menor que a altura real da página, é determinado que uma barra de rolagem aparece, ou seja:
A cópia do código é a seguinte: if (document.documentElement.clientHeight <document.documentElement.offsetheight) scroll = true;
Para usar o document.documentElement, você deve adicionar uma declaração à frente da página:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
De fato, esse código não funciona porque não considerou um problema, ou seja, a borda do navegador. Quando obtemos a altura do peso da página, ela inclui a borda do navegador. A borda do navegador é de 2 pixels; portanto, em qualquer caso, o peso do cliente é sempre menor que o peso do lado, o que o torna verdadeiro, mesmo sem uma barra de rolagem. Portanto, precisamos corrigir esse erro. O código deve ser alterado assim e subtrair 4 pixels no meio do peso, ou seja:
Copie o código da seguinte forma: if (document.documentElement.clientHeight <document.documentElement.offsetheight-4) {
// Executa scripts relacionados.
}
Além disso, precisamos descobrir aqui que o código acima julga a barra de rolagem horizontal. Geralmente precisamos julgar o pergaminho vertical, o código é o seguinte:
Copie o código da seguinte forma: if (document.documentElement.clientwidth <document.documentElement.offsetWidth-4) {
// Executa scripts relacionados.
}
Para determinar se a barra de rolagem foi puxada para a parte inferior da página, você pode usar o seguinte código
Copie o código da seguinte forma: window.onscroll = function () {
var marginbot = 0;
if (document.documentElement.scrolltop) {
marginbot = document.documentElement.scrolHeight (document.documentElement.scrolltop+document.body.scrolltop) -document.documentElement.clientHeight;
} outro {
marginbot = document.body.scrolHeight document.body.scrolltop- document.body.clientHeight;
}
if (marginbot <= 0) {
// Faça algo
}
}
Exemplo 2
Procurando online. Muito compatível com o navegador. Estranhamente, não encontrei nenhuma informação relevante no documento. Publique o código.
Copie o código da seguinte forma:/************************
* Pegue a altura da barra de rolagem da janela
************************/
função getScrolltop ()
{
var scrolltop = 0;
if (document.documentElement && document.documentElement.scrolltop)
{
scrolltop = document.documentElement.scrolltop;
}
caso contrário, se (document.body)
{
scrolltop = document.body.scrolltop;
}
retornar scrolltop;
}
/***************************
* Pegue a altura do alcance visual da janela
***************************/
função getClientHeight ()
{
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight <document.documentElement.clientHeight)?
}
outro
{
var clientHeight = (document.body.clientHeight> document.documentElement.clientHeight)?
}
return clientHeight;
}
/***************************
* Pegue a altura real do conteúdo do documento
***************************/
função getScrolHeight ()
{
return Math.max (document.body.scrolHeight, document.documentElement.scrolheight);
}
function test () {
if (getsCrolltop ()+getClientHeight () == getSCrolHeight ()) {
alerta ("alcance o fundo");
}outro{
alerta ("não atingiu o fundo");
}
}
Reabastecer:
DTD declarou:
Ou seja
Document.DocumentElement.ScrolHeight All Altura do Conteúdo do navegador, document.body.scrolHeight Todo o conteúdo da altura do navegador
Document.documentElement.Scrolltop O navegador rola a altura da peça, document.body.scrolltop é sempre 0
document.documentElement.clientHeight a altura da peça visível do navegador, document.body.clientHeight a altura do conteúdo do navegador
Ff
Document.DocumentElement.ScrolHeight All Altura do Conteúdo do navegador, document.body.scrolHeight Todo o conteúdo da altura do navegador
Document.documentElement.Scrolltop O navegador rola a altura da peça, document.body.scrolltop é sempre 0
document.documentElement.clientHeight a altura da peça visível do navegador, document.body.clientHeight a altura do conteúdo do navegador
Cromo
Document.DocumentElement.ScrolHeight All Altura do Conteúdo do navegador, document.body.scrolHeight Todo o conteúdo da altura do navegador
Document.DocumentElement.Scrolltop é sempre 0, document.body.Scrolltop Browser Rolling Part Height
document.documentElement.clientHeight a altura da peça visível do navegador, document.body.clientHeight a altura do conteúdo do navegador
DTD não declarado:
Ou seja
Document.documentElement.ScrolHeight A altura da parte visível do navegador, document.body.scrolHeight a altura de todo o conteúdo do navegador
Document.DocumentElement.Scrolltop é sempre 0, document.body.Scrolltop Browser Rolling Part Height
document.documentElement.clientHeight é sempre 0, document.body.clientHeight a altura da peça visível do navegador
Ff
Document.documentElement.ScrolHeight A altura da parte visível do navegador, document.body.scrolHeight a altura de todo o conteúdo do navegador
Document.DocumentElement.Scrolltop é sempre 0, document.body.Scrolltop Browser Rolling Part Height
document.documentElement.clientHeight a altura de todo o conteúdo do navegador, document.body.clientHeight a altura da parte visível do navegador
Cromo
Document.documentElement.ScrolHeight A altura da parte visível do navegador, document.body.scrolHeight a altura de todo o conteúdo do navegador
Document.DocumentElement.Scrolltop é sempre 0, document.body.Scrolltop Browser Rolling Part Height
document.documentElement.clientHeight a altura de todo o conteúdo do navegador, document.body.clientHeight a altura da parte visível do navegador
A altura de todo o conteúdo do navegador é a altura de toda a estrutura do navegador, incluindo a soma da altura da parte do rolamento da barra de rolagem + a parte visual + a parte oculta na parte inferior
A altura da parte da rolagem do navegador é a da barra de rolagem sai parte da altura para ver a altura do topo de todo o objeto.
Depois de entender os parâmetros acima, podemos criar um efeito de rolagem compatível com os navegadores IE, FF e Chrome.
Espero que este artigo seja útil para a programação JavaScript de todos.