offset（）を使ってスクロールすると、間違った場所に移動する

2つのdivを含むページがあります - 1つはテーブルを含み、固定された高さではなく、もう1つは複数のテーブルを含み、）最初のdivに基づいて。offset（）を使ってスクロールすると、間違った場所に移動する

HTML：

<div id="tables-container" style="height: 100vh;"> 
    <div id="outstanding-table"> 
     <table> 
      <thead> 
       <tr> 
        <th>Column 1</th> 
        <th>Column 2</th> 
        <th>Column 3</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
       ...more rows... 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

    <hr> 

    <div id="overview-tables" style="overflow-y: auto;"> 
     <h3 id="table-1">Table 1</h3> 
     <table> 
      <thead> 
       <tr> 
        <th>Column 1</th> 
        <th>Column 2</th> 
        <th>Column 3</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
       ...more rows... 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
      </tbody> 
     </table> 

     <h3 id="table-2">Table 2</h3> 
     <table> 
      <thead> 
       <tr> 
        <th>Column 1</th> 
        <th>Column 2</th> 
        <th>Column 3</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
       ...more rows... 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
      </tbody> 
     </table> 

     <h3 id="table-3">Table 3</h3> 
     <table> 
      <thead> 
       <tr> 
        <th>Column 1</th> 
        <th>Column 2</th> 
        <th>Column 3</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
       ...more rows... 
       <tr> 
        <td>Column 1</td> 
        <td>Column 2</td> 
        <td>Column 3</td> 
       </tr> 
      </tbody> 
     </table> 
     ...more tables... 
    </div> 
</div>

JS：

$(document).ready(function() { 
    var overviewTablesHeight = $('#tables-container').innerHeight() - $('#outstanding-table').innerHeight() - 50; 
    $('#overview-tables').innerHeight(overviewTablesHeight); 

    var timeoutTime = 1000; 
    var tableId = getFirstTableId(); 

    scrollDown(); 

    function getFirstTableId() { 
     var id = 'table-1'; 
     return id; 
    } 

    function getNextTableId() { 
     var tableIdParts = tableId.split('-'); 
     var id = tableIdParts[0] + '-' + (parseInt(tableIdParts[1]) + 1); 
     return id; 
    } 

    function scrollDown() { 
     setTimeout(function() { 
      tableId = getNextTableId(); 

      var scrollTo = $('#' + tableId).position().top - $('#overview-tables').offset().top; 
      console.log($('#' + tableId).offset().top + ' - ' + $('#overview-tables').offset().top + ' = ' + scrollTo); 
      scroll(scrollTo); 

      var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight; 
      if (isBottom) { 
       scrollUp(); 
      } 
      else { 
       scrollDown(); 
      } 
     }, timeoutTime); 
    } 

    function scrollUp() { 
     setTimeout(function() { 
      scroll(0); 
      tableId = getFirstTableId(); 
      scrollDown(); 
     }, timeoutTime); 
    } 

    function scroll(scrollTopValue) { 
     $('#overview-tables').animate({ scrollTop: scrollTopValue }, 'fast'); 
    } 
});

私はthis answerからのアイデアを使用して（自動的に順番に各h3までスクロールして下の部分を取得しようとしています）が底に達するまで、それは上にスクロールして再び開始します。しかし、offset().topは正しい値を与えていないようです。たとえば、3番目のテーブルのオフセット値は2番目のテーブルのオフセット値よりも小さくなり、ダウンの代わりにスクロールアップします。

問題を表示するためにここにはBootplyがあります。計算された値が表示されるようにコンソールログを追加しました。

私はすでに、これらの質問を見て持っていたが、すべては等のマージン、画像、パディングをチェックについて話しているようだが、私のBootplyに私は余裕を持っていない上に、プラス不正な値にはありません同じ量によって毎回のように見える：

出典

2016-09-02 Amy Barrett

私はちょうどほとんど私のスクロール問題を修正this answerを見つけました、しかし、私はそれが私の状況で正しく動作するために少し余分を追加する必要がありました。これは私の更新されたscrollDown関数です：

function scrollDown() { 
    setTimeout(function() { 
     tableId = getNextTableId(); 

     var scrollTo = $('#' + tableId).position().top + $('#overview-tables').scrollTop() - $('#outstanding-table').innerHeight(); 
     scroll(scrollTo); 

     var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight; 
     if (isBottom) { 
      scrollUp(); 
     } 
     else { 
      scrollDown(); 
     } 
    }, timeoutTime); 
}

出典

2016-09-02 15:08:19

offset（）を使ってスクロールすると、間違った場所に移動する

答えて

関連する問題