인피니트 스크롤을 고도로 결정된 오버플로우: 스크롤의 상자 안에 강제로 설치할 때의 엉뚱한 필기

※ 이런 느낌이라면 먼저 움직여라!그런데 왜 참고하지 않는 게 좋을까 ←
※ 뒤에 표시는 아직 잘 안 돼 ←
[201409/30 소스 파일 수정]
더 간단해졌어.
[이런 느낌으로 만들 수 있는 것들!]

(주석 표시줄 무한 스크롤)
[환경]
ruby 2.1.0p0
Rails 4.0.2
jquery 사용
카미나리 사용
약간의 사용
turbolinks 사용
사용하다
[사전 준비]
• infinite scroll 읽기
· 백엔드에서 카미나리를 통해 URL에 페이지를 지정하면 json은 각각 x개의 페이지로 돌아간다.
[예]
대화의 표시로].erb에서overflow:scroll의 디스플레이 영역을 준비합니다.
(미리 준비, talks path(:page=>x)에서 x페이지의 talks가 json으로 돌아올 때)
talk.html.erb

  <div id="talks">
    <div class="item">
      <!-- トーク文章1ページ分 -->
    </div>
    <div class="navigation">
       <%= link_to "next page?", talks_path(:page => 2), :remote => true, :class => "hidden" %>
    </div>
  </div>

talk.css.scss

  #talks{
    max-height:お好きなpx;
    overflow-y:scroll;
  }

talk.js

var clo_InfiniteScroll = function(){
  var pixelsDiffWinDoc = 0;
  var c_bufferPx = 40;//optionsのbufferPx定数
  $(function(){
    if($("#talks").length == 0){
      return;
    }
    var max_page = 1;

    pixelsDiffWinDoc = $(document).height() - $(window).height();//documentの縦幅とwindowの縦幅によってinfinity scrollのmathの計算がずれるため、それを調整する。

    $("#talks").infinitescroll({
        debug : false,
        loading:{
          finishedMsg: "last comment."
        },
        contentSelector : "#talks",
        itemSelector : "#talks > .item",
        navSelector  : "#talks > .navigation",
        nextSelector : "#talks > .navigation > a",
        dataType: "json",
        binder: $("#talks"),
        appendCallback: false,
        maxPage:999,//読み込む最大ページ数
        bufferPx: c_bufferPx,
        pixelsFromNavToBottom: -($("#talks")[0].scrollHeight - $("#talks").height()) + pixelsDiffWinDoc + c_bufferPx,
        errorCallback: function(){
          //適宜処理
        }
    }, function(json, opts) {
      if(json.length == 0){
        $("#talks").infinitescroll("update", { maxPage: max_page }); //全て読み込んだので最大ページを設定
        return;
      }
      $("#talks > .item:last").after('<div class="item"></div>');
      json.forEach(function(obj){
        $("#talks > .item:last").append(obj.html);
      });
      $("#talks").infinitescroll("update", {pixelsFromNavToBottom: -($("#talks")[0].scrollHeight - $("#talks").height()) + pixelsDiffWinDoc + c_bufferPx });
      max_page++;
    });
  });

  var timer = false;
  $(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if( $("#talks").length == 0 ){
        return;
      }
      pixelsDiffWinDoc = $(document).height() - $(window).height();//documentの縦幅とwindowの縦幅の差を再計算
      $("#talks").infinitescroll("update", {pixelsFromNavToBottom: -($("#talks")[0].scrollHeight - $("#talks").height()) + pixelsDiffWinDoc + c_bufferPx });//infinity scroll更新
    }, 200);
  });
}();

infinite scroll을 설정하는 옵션의 여러분은 공식 문서를 참조하십시오. 자신도 잘 모릅니다.
그럼, 뭘 하고 있는지 말하려면
infinite scroll에서 binder가 지정한 요소를 스크롤할 때마다 문서의 세로 너비, 창의 세로 너비, binder 요소의 scrollTop에서 math 등치를 계산하고 이 값이 (pixels FromNavToBottom+bufferPx) 이하일 때마다 infinitescroll 방법의 두 번째 인자인function이라고 부른다.(옳지 않으면 옳지 않다)

 -($("#talks")[0].scrollHeight - $("#talks").height()) + pixelsDiffWinDoc + c_bufferPx

다음 페이지에서 읽을 스크롤 거리를 얻을 수 있으므로 페이지를 읽을 때마다 이 값을 pixelsFrom NavToBottom으로 설정하면 됩니다.다만bootstrap 등overflow:scroll 내부의 내용 높이가 창 크기에 따라 변동되는 경우 이 값은 자동으로 다시 쓰지 않기 때문에 다시 계산한 후에 업데이트해야 합니다.(window.resize 부)
터보링크의 binder는 $(window) 가 아니기 때문에 아직 이중 이벤트가 발생하지 않았습니다.
위의 예에서 버퍼Px의 표준 행위는 약 40 이상을 지정하지 않으면 읽을 수 없습니다.
다음 페이지의 기록을 읽을 때 scroll Height로 한순간에 표시된 불러오는 부분을 포함하는 높이를 계산했기 때문이다.