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

Question

我在项目中使用Angular UI Grid。 网格本身会调整大小，以便所有列在div中水平放置。

效果很好，直到一个屏幕上的行数超过了容纳的行数为止。 然后，出现一个垂直滚动条（好），该滚动条覆盖了最后一列的一部分（坏）。 可以启用水平滚动条以达到最后20像素左右，但水平滚动时，标题单元格不会滚动。 这会使所有内容失去对齐。

由于网格在滚动条之前已调整好大小，因此不需要水平滚动条。 但是滚动条覆盖内容的方式意味着没有它，您将看不到任何可能在20像素左右的像素。

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

1. 找到某种方法来知道是否有垂直滚动条，并在某处添加填充或边距以压入标题单元格和数据单元格的内容，以使内容保持一致。 我还没有找到一种简单的方法来抓取可能有或没有滚动条的容器，然后我想问一下是否有滚动条的逻辑很脆弱。 另外，我只是在我认为应该去的地方添加填充而不能有效地推送内容。
2. 找到一种方法，使具有滚动条的容器在具有滚动条时将其推到网格之外。 这个问题与＃1基本相同，因为那个家伙很滑。
3. 找到一种方法来用我自己的滚动条替换。 似乎有人做了一个分支，可以让您使用特定的库来执行此操作，但是我们与UI Grid的特定提交相关联，添加库会引起国会的注意。

有什么想法吗？

Answer 1

如何知道是否存在垂直滚动条：如果尚未使用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。