スクロールされたdivの幅より小さいdivのNiceScroll Scroller

Question

thisのように左から固定された2列の表を使用しています。私はnicescrollを使用しています。問題は、nicescrollプラグインが完全なテーブルの左から右にスクロールを開始することです。固定された列の終わりから表の最後までスクロールして、すべての列をスクロールします。スクロール親のdivの幅が、相対的なスクロールのようなものをスクロールする実際の領域よりも小さいことを意味します。

$('.table').niceScroll({ 
    cursorborder: "", 
    cursorcolor: "#b1babe", 
    boxzoom: false, 
    autohidemode: false, 
    cursorfixedheight: 140, 
    horizrailenabled: true, 
    railhoffset: {top:0, left: 0} 
}); 
$("div[id^='ascrail']").show(); 

Answer 1

問題は、私はあなたが2つのdivタグの中にテーブルを分割することをお勧め代わりtableHeadFixerのniceScrollプラグインを使用する場合：

は

• 最初のdivが含まれている必要がありますのみテーブルヘッダ列
• 秒oneテーブル本体

niceScrollプラグインはdivs not tableを使用できます。

次のステップは、両方のdivにniceScrollを適用することですが、2番目のdivのみで作業することです。 2番目のdivの右側にスクロールするときに最初のdivをスクロールするには、スクロールイベントを処理する必要があります。

$(function() { 
 
    /* 
 
      $("#fixTable").tableHeadFixer({ 
 
      "left": 1 
 
      }); 
 
      */ 
 
    $('#parentHeader').niceScroll({ 
 
    cursorwidth: '0px', 
 
    cursorborder: "", 
 
    cursorcolor: "#b1babe", 
 
    boxzoom: false, 
 
    autohidemode: false, 
 
    cursorfixedheight: 140, 
 
    railhoffset: {top: 10, left: 0}, 
 
    }); 
 
    $('#parent').niceScroll({ 
 
    cursorborder: "", 
 
    cursorcolor: "#b1babe", 
 
    boxzoom: false, 
 
    autohidemode: false, 
 
    cursorfixedheight: 140, 
 
    railhoffset: {top: 10, left: 0}, 
 
    }); 
 

 
    $('#parent').on('scroll', function(e) { 
 
    var lastScrollRight = $(this).scrollLeft(); 
 
    $("#parentHeader").getNiceScroll(0).doScrollLeft(lastScrollRight, 1); 
 
    }); 
 
});

body { 
 
    margin: 0 auto; 
 
    width: 1200px; 
 
} 
 

 
h2 { 
 
    margin-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
#parent { 
 
    height: 100px; 
 
} 
 

 
#fixTable { 
 
    width: 1500px !important; 
 
} 
 

 
#fixTableHeader { 
 
    width: 1500px !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://rawgit.com/lai32290/TableHeadFixer/master/tableHeadFixer.js"></script> 
 
<script src="https://rawgit.com/inuyaksa/jquery.nicescroll/master/dist/jquery.nicescroll.min.js"></script> 
 

 

 

 
<h2><a href="https://github.com/lai32290/TableHeadFixer " target="_blank" title="Script GitHub">TableHeadFixer Fix Head 
 
    and Left Column</a></h2> 
 

 
<div id="parentHeader"> 
 
    <table id="fixTableHeader" class="table"> 
 
     <thead> 
 
     <tr style="text-align: center"> 
 
      <th>Jahr</th> 
 
      <th>Januar</th> 
 
      <th>Februar</th> 
 
      <th>März</th> 
 
      <th>April</th> 
 
      <th>Mai</th> 
 
      <th>Summe</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
<div id="parent"> 
 
    <table id="fixTable" class="table"> 
 
     <tbody> 
 
     <tr> 
 
      <td>2001</td> 
 
      <td>100.00</td> 
 
      <td>100.00</td> 
 
      <td>100.00</td> 
 
      <td>100.00</td> 
 
      <td>100.00</td> 
 
      <td>500.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2002</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2003</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2004</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2005</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2006</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2007</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2008</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2009</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2010</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2011</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2012</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2013</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2014</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2015</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>110.00</td> 
 
      <td>550.00</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>