Você precisa entender três elementos DOM, a saber: alteração do cliente, fora do peso, scrolltop.
CLIENTE HEIK: A altura desse elemento ocupa a altura de todo o espaço. Portanto, se uma div ter uma barra de rolagem, essa altura não incluirá o conteúdo da parte a seguir que a barra de rolagem não exibe. E é apenas a altura da div.
Offsetheight: refere -se à altura do conteúdo do elemento. De acordo com o exposto, essa altura é a altura dentro da div, incluindo a parte visível e a parte invisível abaixo da barra de rolagem.
ScrollTop: O que é isso? Pode ser entendido como o comprimento da barra de rolagem que pode ser rolada.
Por exemplo, se uma altura div for de 400px (ou seja, o peso do cliente for 400) e o conteúdo interno é uma lista muito longa e a altura do conteúdo é de 1000px (ou seja, o peso do peso é 1000). Portanto, na parte visível, vemos que o conteúdo de 400px e 1000px ainda é invisível de 600px. E essa parte invisível é o que podemos exibir puxando a barra de rolagem. Se a barra de rolagem não puxar, o scrolltop será 0 neste momento. Se você puxar a barra de rolagem para a parte inferior, a parte inferior da lista será exibida. No momento, o ScrollTop é 600. Portanto, o intervalo de valor do ScrollTop é [0, 600]. Portanto, este 600 pode ser entendido como o comprimento da barra de rolagem que pode ser rolada.
Depois de entender o conceito acima. É fácil dizer se ele rola para o fundo.
Primeiro, puxamos a barra de rolagem, puxamos de cima para baixo e a alteração é o valor do scrolltop, e esse valor tem um intervalo.
Este intervalo é: [0, (OffsethEight - ClientHeight)]
Ou seja, todo o processo de barra de rolagem puxando alterações dentro do intervalo de 0 a (OffSetHeight ClientHeight).
1. Julgamento A barra de rolagem rola para o fundo: scrolltop == (OffSetHeight ClientHeight)
2. Dentro de 50px da extremidade inferior da barra de rolagem: (OffSetHeight ClientHeight) Scrolltop <= 50
3. Dentro de 5% da distância da barra de rolagem de baixo: scrolltop / (Offsetheight clientHeight)> = 0,95
Como acima.
Se você deseja puxar para o fundo, carregue automaticamente o conteúdo. Basta registrar um evento de barra de rolagem:
A cópia do código é a seguinte:
scrollBottomTest = function () {
$ ("#conter"). roll (function () {
var $ this = $ (this),
viewh = $ (this) .Height (), // Altura visível
contentH = $ (this) .get (0) .ScrolHeight, // Altura do conteúdo
scrolltop = $ (this) .Scrolltop (); // Altura de rolagem
// if (contentH - viewH - scrolltop <= 100) {// Ao atingir os 100px inferior, carregue um novo conteúdo
if (scrolltop/(contentH -Viewh)> = 0,95) {// Ao atingir os 100px inferior, carregue novo conteúdo
// carrega os dados aqui ..
}
});
}
PS: Aqui eu recomendo uma ferramenta de consulta on -line sobre eventos JS, que resume os tipos de eventos e funções de eventos comumente usados de JS:
Uma lista completa de eventos e funções JavaScript:
http://tools.vevb.com/table/javascript_event