jQueryはスクロールバーが下部に到達したかどうかを検出する
8136 ワード
一、jQuery検出ブラウザwindowスクロールバーが底部に到達
jQuery取得位置と寸法相関関数:
二、jQuery検出div中スクロールバーが底部に到達
前編ではjQuery検出ブラウザwindowスクロールバーが底に到達したことを紹介したが、scrollTopとscrollHeightの概念はまだ理解されておらず、通常スクロールバーはdivに置かれている.
内部のdivラベルの高さは外部よりも長く、外部のdivでは垂直スクロールバーが自動的に表示されるため、ブラウザで開くと垂直スクロールバーが表示されます.
では、ここの外部divのscrollTop、scrollHeight属性はいったい何なのでしょうか.実際、jsコードでは、スクロールバーは抽象的に「点」として扱われています.scrollHeightは「スクロールバーの高さ」(b)ではなく、スクロールバーがスクロールする必要がある高さ、すなわち内部divの高さ750 pxを表す.一方、scrollTopは、スクロールバー(1つのポイント)の現在の位置が750 pxでどれだけ占めているかを示します.
垂直スクロールバーが底部に到達したかどうかを判断
コード解説:内部divの高さは750、外部divの高さは500なので、垂直スクロールバーは750-500=250の距離をスクロールする必要があり、下部に達します.文nScrollTop+nDivHight>=nScrollHightを参照してください.プログラムでは,外部divのscroll(スクロール)イベントでif判定文を検出し実行することは,CPUリソースを非常に消費する.マウスでスクロールバーをドラッグすると、ピクセルの変動が1つあればイベントがトリガーされます.しかし、スクロールバーの両端の矢印をクリックすると、イベントがトリガーされる頻度はずっと低くなります.スクロールバーのscrollイベントは慎重に使用してください.この例では、水平スクロールバーがない場合、水平スクロールバーがある場合、状況は細かく変化するので、nScrollTop+nDivHight>=nScrollHight文では、演算子を">="で比較する必要があり、水平スクロールバーがない場合は、等号"="で十分です.実際にテストしてみてください.水平スクロールバーが頭までスクロールしたかどうかを判断することもできます.
三、jQueryスクロールバーが底部までデータをロードする
原文:https://www.cnblogs.com/linvan/p/6024675.html?utm_source=itdadao&utm_medium=referral
jQuery取得位置と寸法相関関数:
$(document).height()ページ全体の高さを取得$(window).height()現在、つまりブラウザが見えるページの部分の高さを取得します.このサイズは、ブラウザウィンドウをズームするときに変更され、documentとは異なるscrollTop()は、スクロールバーの上部に対する一致する要素のオフセットを取得します.scrollLeft()は、スクロールバーの左側に対する一致要素のオフセットを取得する.scroll([[data],fn])スクロールバーが変化した時にscrollイベントjQueryに触れてスクロールバーが底部コードに到達することを検出する:$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop()<=0){
alert(" 0");
}
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
alert(" " + $(document).scrollTop());
}
});
});二、jQuery検出div中スクロールバーが底部に到達
前編ではjQuery検出ブラウザwindowスクロールバーが底に到達したことを紹介したが、scrollTopとscrollHeightの概念はまだ理解されておらず、通常スクロールバーはdivに置かれている.
<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
<div style="height:750px;">
div>
div>内部のdivラベルの高さは外部よりも長く、外部のdivでは垂直スクロールバーが自動的に表示されるため、ブラウザで開くと垂直スクロールバーが表示されます.
では、ここの外部divのscrollTop、scrollHeight属性はいったい何なのでしょうか.実際、jsコードでは、スクロールバーは抽象的に「点」として扱われています.scrollHeightは「スクロールバーの高さ」(b)ではなく、スクロールバーがスクロールする必要がある高さ、すなわち内部divの高さ750 pxを表す.一方、scrollTopは、スクロールバー(1つのポイント)の現在の位置が750 pxでどれだけ占めているかを示します.
垂直スクロールバーが底部に到達したかどうかを判断
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title> ？title>
<script language="javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js">script>
<script language="javascript">
$(document).ready(function (){
var nScrollHight = 0; // ( )
var nScrollTop = 0; //
var nDivHight = $("#div1").height();
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
alert(" ");
});
});
script>
<body>
<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
<div style="background-color:#ccc; height:750px;">IE FF div>
div>
body>
html>コード解説:内部divの高さは750、外部divの高さは500なので、垂直スクロールバーは750-500=250の距離をスクロールする必要があり、下部に達します.文nScrollTop+nDivHight>=nScrollHightを参照してください.プログラムでは,外部divのscroll(スクロール)イベントでif判定文を検出し実行することは,CPUリソースを非常に消費する.マウスでスクロールバーをドラッグすると、ピクセルの変動が1つあればイベントがトリガーされます.しかし、スクロールバーの両端の矢印をクリックすると、イベントがトリガーされる頻度はずっと低くなります.スクロールバーのscrollイベントは慎重に使用してください.この例では、水平スクロールバーがない場合、水平スクロールバーがある場合、状況は細かく変化するので、nScrollTop+nDivHight>=nScrollHight文では、演算子を">="で比較する必要があり、水平スクロールバーがない場合は、等号"="で十分です.実際にテストしてみてください.水平スクロールバーが頭までスクロールしたかどうかを判断することもできます.
三、jQueryスクロールバーが底部までデータをロードする
msg_list_loading = false;
$('.msg_list').on('scroll', function(){
if ( ! msg_list_loading ){
load_more_msg();
}
})
function load_more_msg(){
var msg_list = $('.msg_list');
if (nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight ) {
msg_list_loading = true;
msg_list.append(' ');
$.get('ajax_data.html').done(function( data ){
msg_list.find(".loading").remove();
msg_list.append( data );
msg_list_loading = false;
});
}
} 原文:https://www.cnblogs.com/linvan/p/6024675.html?utm_source=itdadao&utm_medium=referral