ホームページ > ウェブフロントエンド > jsチュートリアル > data_jqueryをロードするjqueryのスクロール方法

data_jqueryをロードするjqueryのスクロール方法

WBOY
リリース: 2016-05-16 16:10:41
オリジナル
1418 人が閲覧しました

この記事の例では、jquery でデータをスクロールして読み込む方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

一部の Web ページを閲覧するときに、ブラウザのスクロール バーがページの一番下まで引っ張られると、ページはユーザーが閲覧できるようにさらにコンテンツを自動的に読み込み続けます。この技術を仮にスクロールローディング技術と呼びますが、Sina Weibo、QQ Zone などの多くの Web サイトでこの技術が使用されていることがわかりました。

コードは次のとおりです:

コードをコピー コードは次のとおりです:


<頭>

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
var range = 50; var range = 50; var elemt = 500; //要素の高さ/ユニットpx> var maxnum = 20; var maxnum = 20; var num = 1;
var totalheight = 0; Var main = $("#Content") // メイン要素
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); var srollPos = $(window).scrollTop(); // スクロールバーから上部までの距離 (ウィンドウを超えたページの高さ)
//console.log("スクロールバーの上部までの垂直の高さ: " $(document).scrollTop());
//console.log("ページのドキュメントの高さ:" $(document).height());
//console.log('ブラウザの高さ:' $(window).height());
totalheight = parseFloat($(window).height()) parseFloat(srollPos);
If(($(document).height()-range) main.append("
hello world" srollPos "- --" num "
");
番号 ;
}
});
});




                                                                                                                                                                                                              
Hello World テスト DIV






この記事が皆さんの jQuery プログラミングに役立つことを願っています。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート