NiceScroll Scroller在小于div的滚动div宽度

时间：2016-05-20 10:50:05

标签： jquery css nicescroll

我正在使用左侧固定两列的表格，如this中所示。我正在使用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();

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题