在 Kendo 网格的标题下显示水平滚动条答案

【问题标题】：Show Horizontal scrollbar under the header in Kendo grid在 Kendo 网格的标题下显示水平滚动条
【发布时间】：2018-05-06 10:54:18
【问题描述】：

我有一个带有水平滚动条的剑道网格。默认情况下，滚动条的位置在网格的底部。

但我的要求是在网格顶部显示水平滚动条（在网格标题下）。

有可能吗？请告诉我！

【问题讨论】：

标签： jquery-ui kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

使用这个答案How to change scroll bar position with CSS? 并使用样式规则将其修改为可滚动的剑道网格

.k-grid-content,
.k-grid-content table {
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg); /* IE 9 */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

将水平滚动条放在顶部。

演示：https://dojo.telerik.com/@Stephen/etIYa

如果您使用虚拟滚动，那么您将不得不更改样式规则以进行补偿，因为可滚动和虚拟可滚动剑道网格之间的网格结构不同。

【讨论】：

感谢恐惧！它按预期工作。有没有办法像我们有固定的标题（docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/…）一样拥有一个固定的水平滚动条。有什么建议吗？
不一样。您必须渲染自己的滚动条并更新它，而不是翻转元素。这是结合您与telerik.com/forums/top-horizontal-scrollbar-in-grid 链接的示例的演示：dojo.telerik.com/@Stephen/EhaXaK。再多的话，你就得把我放在工资单上；）
感谢演示恐惧！但我们最终得到了 2 个水平滚动条，对吗？所以，我根据标题位置翻转并只显示一个滚动条。因此，用户只会在标题下看到滚动条。
在我的第二个演示中，我删除了“翻转”CSS，只实现了“手动”滚动条（和 .k-grid-content { overflow-x: hidden } 以防止内置滚动条从显示）