NiceScroll Scroller in kleineren div als scrollte div Breite

Question

Ich verwende Tabelle mit festen zwei Spalte von links wie in this. Ich benutze NiceScroll. Das Problem ist Nicescroll Plugin beginnt von links nach rechts auf der gesamten Tabelle scrollen. Ich möchte, dass es vom Ende der festen Spalten zum Ende der Tabelle scrollt und alle Spalten scrollt. Bedeutet, dass die Scroller-Eltern-Div-Breite kleiner als der tatsächliche Bereich ist, um etwas wie relatives Scrollen zu scrollen.

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

Answer 1

Wenn das Problem ist niceScroll Plugin statt tableHeadFixer zu verwenden, empfehle ich Ihnen die Tabelle in zwei divs zu teilen:

• das erste div
• die zweite nur die Tabellenkopf Spalten
enthalten muss One the table body

Das niceScroll Plugin kann divs not table verwenden.

Der nächste Schritt ist, niceScroll für beide divs anzuwenden, aber nur für den zweiten. Das Bildlaufereignis muss behandelt werden, um das erste Teilbild zu scrollen, wenn auf dem zweiten Teilbild nach rechts gescrollt wird.

$(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>