我正在项目中使用Angular UI Grid。网格调整自身大小，以便所有列水平适合div。
这很好用，直到一个屏幕上的行数超过容纳范围。然后，出现一个垂直滚动条(好(，它覆盖了最后一列的一部分(坏(。可以启用水平滚动条以达到最后 20 个左右的像素，但当您水平滚动时，标题单元格不会滚动。这会让一切都不对齐。
由于网格在滚动条之前是完美的大小，因此不需要水平滚动条。但是滚动条覆盖内容的方式意味着，如果没有它，您将看不到任何可能在正确的 20 像素左右的内容。
我需要解决这个问题。以下是我研究实施的一些解决方案，但没有成功：
- 找到一些方法来了解是否有垂直滚动条，并在某处添加填充或边距以推入标题单元格和数据单元格的内容，以保持对齐。我还没有找到一种简单的方法来抓取可能有也可能没有滚动条的容器，然后我认为询问它是否有滚动条的逻辑会很脆弱。另外，只是在我认为应该去的地方添加填充并没有有效地推动内容。
- 找到一种方法，让带有滚动条的容器在具有滚动条时推到网格之外。这与#1的问题基本相同，因为那个家伙很滑。
- 想办法用我自己的滚动条替换滚动条。似乎有人做了一个分支，让你使用特定的库来做到这一点，但我们绑定到UI Grid的特定提交，添加库需要国会的行为。
思潮？
如何知道是否有垂直滚动条： 如果您尚未使用 rowTemplate 自定义行，那么您的行高度可能为 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。