0

I am using table with fixed two column from the left like in this. I am using nicescroll. The problem is nicescroll plugin starts scrolling from the left to right on the complete table. I want it to scroll from the end of fixed columns to end of the table and scroll all the columns. Means that the scroller parent div width is less than the actual area to scroll something like relative scrolling. 

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

1 Answers1

0

If the problem is to use niceScroll plugin instead of tableHeadFixer I suggest you to divide the table into two divs:

  • the first div must contain only the table header columns
  • the second one the table body

The niceScroll plugin can use divs not table.

the next step is to apply niceScroll for both divs but working only on the second one. The scroll event must be handled in order to scroll the first div when scrolling to the right on the second 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>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61