3

我创建了一个带有滚动条的表格，其中在滚动 y 时标题是固定的，而在滚动表格 x 时标题正在滚动。这是我的代码。

$(function () {
	$('table').on('scroll', function () {
		$("table > *").width($("table").width() + $("table").scrollLeft());
  });
});
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

但问题是我无法使用 mcustomscrollbar 实现此功能。我想要这种使用 mcustomscrollbar 或滚动条上不受浏览器影响的任何其他有吸引力的 CSS 滚动的功能。如果有人知道这个问题的解决方案，那么将不胜感激。

4

3 回答 3

1

做一个这样的表

<div class="graphData" data-mcs-axis="x">
    <table class="fixed_headers">
        <thead>
            <tr><th>data1</th><th>data2</th><th>data3</th></tr>   
        </thead>
        <tbody >
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            <tr><td>data1</td><td>data2</td><td>data3</td></tr>
            ...
        </tbody>
    </table>
</div>

之前添加脚本</body>

$(window).load(function(){

  $("table.fixed_headers tbody").mCustomScrollbar({
    mouseWheel:{ preventDefault: true },
    autoExpandScrollbar:true
  });

  $(".graphData").mCustomScrollbar({
            scrollbarPosition:"outside"
  });
});

此脚本将x滚动添加到标题并xy滚动到tbody

于 2018-05-22T11:51:17.983 回答
1

检查以下内容：

在你的脚本中添加这个 -

$(".dataTables_scrollBody").mCustomScrollbar({  // custom scroll bar plugin
theme:"minimal-dark",  // custom scroll theme set
axis: "yx",     // custom scroll ver,hor scroll
callbacks: {    // callback for thead,tbody scroll
whileScrolling: function() {
$(".dataTables_scrollHead").scrollLeft(this.mcs.left *-1);
},
},
});

希望能帮助到你。需要更多信息也检查一下 -

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/callbacks_example.html

于 2016-08-10T10:20:38.303 回答
0

检查以下您可以使用的方式mCustomScrollbar。利用$("tbody").mCustomScrollbar({

$(function () {
	$('table').on('scroll', function () {
		$("table > *").width($("table").width() + $("table").scrollLeft());
  });

  $("tbody").mCustomScrollbar({
    theme:"light-3",
    scrollButtons:{
      enable:false
    },
    mouseWheel:{ preventDefault: true },
    scrollbarPosition: 'inside',
    autoExpandScrollbar:true,
    theme: 'dark',
     axis:"yx",
                setWidth: "auto"
  });

});
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow: hidden;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow: hidden;
    height: 140px;
}

td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<script src="https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js"></script>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

于 2016-02-09T10:54:48.637 回答