Question

情况是div内部的jqGrid，其中网格的大小垂直和水平都大于div。目标是让列标题左右滚动并使用水平滚动，并且在垂直滚动时始终可以看到它们。

通过将overflow-x：auto设置为包含jqGrid的div并将overflow-y设置为auto以用于ui-jqgrid-bdiv，可以很容易地添加CSS以获得两个滚动条。

此技术的问题在于，只有当网格水平向右滚动到足以显示网格的右侧时，垂直滚动条才可见。使用ui-jqgrid-bdiv滚动并使用DOM操作来设置包含元素的大小会导致两个滚动条都可见，但是主体内容会滚动而不会滚动列标题。

有一个类似的堆栈溢出问题JqGrid add vertical scroll with horizontal scolling，但答案没有解决这个问题。

在给定网格的DOM结构的情况下，看起来好像没有纯CSS解决方案。有没有一个JavaScript解决方案，也许有一个听滚动事件？

Answer 1

您可以设置网格本身的height和width属性，以便网格处理滚动而不是嵌套的div。设置尺寸与div相同或稍小一些。

<div style="height:200px; width:100px;">
    <table id="grid"></table>
</div>

<script>
$("#grid").jqGrid({
    height: '200',
    width: '100',
    shrinkToFit: false //Tells the grid to let columns go to set size
    //Add all your properties
});
</script>

或

如果您无法设置父width的{{1}}和height，则可以设置网格的尺寸，如上所示。只要网格的属性设置为特定大小，如果数据超出这些边界，它将使其成为自己的滚动条。

jsFiddle

jqGrid - 使用水平和垂直滚动条保持垂直滚动条可见

1 个答案: