jsモバイルHTML 5ページを最下部にスライドさせてコンテンツロードをトリガー
2295 ワード
まず、3つの定義を明らかにします.
ドキュメントの高さページ全体の高さ表示ウィンドウの高さ表示ブラウザの表示画面の高さスクロールバースクロール高さスクロールバースライド高さ
したがって、ドキュメントの高さ=表示ウィンドウの高さ+スクロールバーの高さとなると、スクロールバーは最後までぴったりとなる.
では、上記の3つの高さ値をそれぞれ取得する3つの異なる方法を定義します.
01
//ドキュメントの高さ
02
function getDocumentTop() {
03
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
04
if (document.body) {
05
bodyScrollTop = document.body.scrollTop;
06
}
07
if (document.documentElement) {
08
documentScrollTop = document.documentElement.scrollTop;
09
}
10
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop;
11
}
12
13
//視覚窓の高さ
14
function getWindowHeight() {
15
var windowHeight = 0; if (document.compatMode == "CSS1Compat") {
16
windowHeight = document.documentElement.clientHeight;
17
} else {
18
windowHeight = document.body.clientHeight;
19
}
20
return windowHeight;
21
}
22
23
//スクロールバーのスクロール高さ
24
function getScrollHeight() {
25
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
26
if (document.body) {
27
bodyScrollHeight = document.body.scrollHeight;
28
}
29
if (document.documentElement) {
30
documentScrollHeight = document.documentElement.scrollHeight;
31
}
32
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight;
33
}
スクロールバーを傍受するイベントが必要です
1
window.onscroll=function(){//イベントコンテンツの傍受}
スクロールバーが移動するとすぐに上で定義したイベントトリガ関数が出発しますが、スクロールバーが最後までトリガーされるので、自然とこのトリガイベントには論理的に制御する必要があります.
view source
print ?
1
window.onscroll = function () {
2
//イベント内容の傍受
3
if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
4
//スクロールバーを最後までスクロールすると、ここでトリガーされます
5
//非同期要求データ、ローカルリフレッシュdom
6
ajax_function()
7
}
8
}
ドキュメントの高さページ全体の高さ表示ウィンドウの高さ表示ブラウザの表示画面の高さスクロールバースクロール高さスクロールバースライド高さ
したがって、ドキュメントの高さ=表示ウィンドウの高さ+スクロールバーの高さとなると、スクロールバーは最後までぴったりとなる.
では、上記の3つの高さ値をそれぞれ取得する3つの異なる方法を定義します.
01
//ドキュメントの高さ
02
function getDocumentTop() {
03
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
04
if (document.body) {
05
bodyScrollTop = document.body.scrollTop;
06
}
07
if (document.documentElement) {
08
documentScrollTop = document.documentElement.scrollTop;
09
}
10
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop;
11
}
12
13
//視覚窓の高さ
14
function getWindowHeight() {
15
var windowHeight = 0; if (document.compatMode == "CSS1Compat") {
16
windowHeight = document.documentElement.clientHeight;
17
} else {
18
windowHeight = document.body.clientHeight;
19
}
20
return windowHeight;
21
}
22
23
//スクロールバーのスクロール高さ
24
function getScrollHeight() {
25
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
26
if (document.body) {
27
bodyScrollHeight = document.body.scrollHeight;
28
}
29
if (document.documentElement) {
30
documentScrollHeight = document.documentElement.scrollHeight;
31
}
32
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight;
33
}
スクロールバーを傍受するイベントが必要です
1
window.onscroll=function(){//イベントコンテンツの傍受}
スクロールバーが移動するとすぐに上で定義したイベントトリガ関数が出発しますが、スクロールバーが最後までトリガーされるので、自然とこのトリガイベントには論理的に制御する必要があります.
view source
print ?
1
window.onscroll = function () {
2
//イベント内容の傍受
3
if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
4
//スクロールバーを最後までスクロールすると、ここでトリガーされます
5
//非同期要求データ、ローカルリフレッシュdom
6
ajax_function()
7
}
8
}