0

我正在使用从左侧固定两列的表格，就像在这个一样。我正在使用 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();
4

1 回答 1

0

如果问题是使用 niceScroll 插件而不是 tableHeadFixer，我建议您将表格分为两个 div：

  • 第一个 div 必须只包含表头列
  • 第二个表体

niceScroll 插件可以使用 div 而不是表格。

下一步是为两个 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-20T12:18:30.657 回答