NiceScroll Scroller在較小的div比捲動的div寬度

我使用的表格與固定的兩列從左邊像this。我正在使用nicescroll。問題是nicescroll插件開始在整個表格上從左向右滾動。我希望它從固定列的末尾滾動到表格的結尾並滾動所有列。意思是滾動父div寬度小於實際區域滾動像相對滾動的東西。NiceScroll Scroller在較小的div比捲動的div寬度

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

來源

2016-05-20 Junaid Atique

如果問題是使用niceScroll插件而不是tableHeadFixer我建議你表分爲兩個div：

第一個div只能包含表頭列
第二一個表體

niceScroll插件可以使用divs not table。

下一步是爲兩個div應用niceScroll，但僅適用於第二個。必須處理滾動事件，以便在第二個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>

來源

2016-05-20 12:18:30 gaetanoM

NiceScroll Scroller在較小的div比捲動的div寬度

回答

相關問題