我在项目中使用Angular UI Grid。网格本身会调整大小，以便所有列在div中水平放置。
效果很好，直到一个屏幕上的行数超过了容纳的行数。然后，出现一个垂直滚动条（好），该滚动条覆盖了最后一列的一部分（坏）。可以启用水平滚动条以达到最后20像素左右，但是水平滚动时，标题单元格不会滚动。这会使所有内容失去对齐。
由于网格在滚动条之前已调整好大小，因此不需要水平滚动条。但是滚动条覆盖内容的方式意味着没有它，您将看不到任何可能在20像素左右的像素。
我需要解决这个问题。这是我尝试实施的一些解决方案，但均未成功：
找到某种方法来知道是否有垂直滚动条，并在某处添加填充或边距以压入标题单元格和数据单元格的内容，以使内容保持一致。我还没有找到一种简单的方法来抓取可能有或没有滚动条的容器，然后我想问一下是否有滚动条的逻辑很脆弱。另外，仅在我认为应该添加的位置处添加填充并不能有效地推动内容。
找到一种方法，使具有滚动条的容器在具有滚动条时将其推到网格之外。这个问题与＃1基本相同，因为那个家伙很滑。
找到一种方法来用我自己的滚动条替换。似乎有人做了一个分支，可以让您使用特定的库来执行此操作，但是我们与UI Grid的特定提交相关联，因此添加库会引起争议。
有什么想法吗？
最佳答案
如何知道是否有垂直滚动条：
如果您尚未使用rowTemplate自定义行，则您的rowHeight可能为30px（否则请检查）。
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
安全面：按％指定所有列的宽度，并为滚动条保留1％的宽度。
丑陋的一面：获取“视口”的宽度，遍历并根据所提供的百分比为所有列计算实际像素，如果使用上述方法检测到垂直滚动条，则保留15px。