ホームページ  >  記事  >  ウェブフロントエンド  >  JS は単にスライディング ロード データ インスタンス共有を実装するだけです

JS は単にスライディング ロード データ インスタンス共有を実装するだけです

小云云
小云云オリジナル
2018-01-09 14:03:122075ブラウズ

この記事では、JavaScriptのイベントレスポンスやページ要素の属性の動的操作に関するテクニックを中心に、JSでデータのスライディングロードを簡単に実装する方法を紹介しますので、困っている方の参考になれば幸いです。

//滑动
function getScrollTop()
{
 var scrollTop = 0;
 if (document.documentElement && document.documentElement.scrollTop) {
   scrollTop = document.documentElement.scrollTop;
  }else if (document.body) {
  scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight()
{
 var clientHeight = 0;
 if (document.body.clientHeight && document.documentElement.clientHeight) {
   clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 }else {
   clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
   return clientHeight;
}
//获取文档完整的高度
function getScrollHeight()
{
   return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//绑定事件
window.onscroll = function ()
{
 if (getScrollTop() + getClientHeight() == getScrollHeight()) {
  //dosomething
 }
}

関連する推奨事項:
javascript-js スライディングロード中のスライディングロードの数を制限する方法

Javascript vue.js テーブルのページネーション、データの Ajax 非同期ロード

ブートストラップ ツリービューはデータの動的なロードを実現しますそして高速な検索機能の実装

以上がJS は単にスライディング ロード データ インスタンス共有を実装するだけですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。