スクロールによるページング処理に関して#2

jquery.inview: https://github.com/protonet/jquery.inview

スクロールによるページング処理に関してではスクロールして末尾に達したら問答無用でロードを実行するような仕組みになっているけど、要素が見えているかをチェックしたりする事も一応出来るし、それをサポートするjQueryプラグインも存在する

※上記のinviewとか以前に検証したjQueryで特定のセレクタとかが見えているに対してなんかするやつとか

っていう事でちょいとやってみた(inviewとかを使わずに参考のを見つつ)

index.html

<html>
  <head>
    <script src="jquery.js"></script>
  </head>
  <body>
    <!-- 適当にスクロールしないと見えないようなコンテンツ -->
    <a class="page-link">next</a>
    <script src="main.js"></script>
  </body>
</html>

main.js

(function() {
  var lock = false;

  $(window).scroll(function() {
    if (lock) {
      return;
    }

    var elem = document.querySelector(".page-link");

    if (!elem) {
      return;
    }

    var rect = elem.getBoundingClientRect();
    var e = document.elementFromPoint(rect.left, rect.top);

    if (!e) {
      return;
    }

    lock = true;

    setTimeout(function() {
      $(e).remove();
      lock = false;
    }, 3000);
  });
})();

っていうような感じでdocument.elementFromPointで要素が見えているなら要素に対応したElementクラスの派生クラスが返ってくるはず。で見えているなら3秒のタイムアウトにより要素が削除されるような感じになる。今回適当にやったのであれだけど、タイムアウトなり非同期で処理するべき所は一定のオブジェクトを使うなりでロックすべきかも(ロックしないとスクロールをごちゃごちゃすると数回起きる可能性)

まぁ参考先にも書いてるけど若干ブラウザの差異がある模様。jquery.inviewとか使った方が手っ取り早いのではと