如何控制Angular UI Grid中的滚动条

Question

我在项目中使用Angular UI Grid。网格大小本身，以便所有列水平地适合div。

这很有效，直到在一个屏幕上有更多的行不适合。然后，出现一个垂直滚动条（好），它覆盖了最后一列的一部分（坏）。可以启用水平滚动条以达到最后20个左右的px，但是当您水平滚动时，标题单元格不会滚动。这会使一切都不对齐。

由于网格在滚动条之前的尺寸非常合适，因此不需要水平滚动条。但滚动条覆盖内容的方式意味着没有它，你就看不到任何可能在右边20左右的内容。

我需要解决这个问题。以下是我实施的一些解决方案，但未成功：

1. 找一些方法来了解是否有垂直滚动条并在某处添加填充或边距以推入标题单元格和数据单元格的内容，以保持对齐。我还没有找到一个简单的方法来抓住可能有也可能没有滚动条的容器，然后我认为询问它是否有滚动条的逻辑会很脆弱。另外，只是在我认为它应该去的地方添加填充物并没有有效地推翻内容。
2. 找到一种方法，当带有滚动条时，带有滚动条的容器会推到网格外部。这与＃1的问题基本相同，因为那个家伙很滑。
3. 找到一种用我自己的方式替换滚动条的方法。似乎有人做了一个分支，允许你用特定的库来做这个，但是我们与UI Grid的特定提交相关联，并且添加库需要一个国会的行为。

思想？

Answer 1

如何知道是否有垂直滚动条： 如果您还没有使用rowTemplate自定义行，那么您可能有一个30px的rowHeight（如果不是请检查）。

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％。
• 丑陋的一面：获取＆＃39;视口的宽度，循环并计算所有列提供的百分比的实际像素，如果使用上述技术检测到垂直滚动条，则留下15px。