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

Question

我在元素中使用 Angular UI Grid。网格自行调整大小，以便所有列水平放置在一个 div 中。

这很好用，直到行数多于一个屏幕放不下为止。然后，出现一个垂直滚动条(好)，它覆盖了最后一列的一部分(坏)。可以启用水平滚动条以达到最后 20 像素左右，但是当您水平滚动时，标题单元格不会滚动。这会使所有内容都不对齐。

由于网格在滚动条之前的尺寸完美，因此不需要水平滚动条。但是滚动条覆盖内容的方式意味着没有它，您将看不到右侧 20 像素左右的任何内容。

我需要解决这个问题。以下是我研究过但未成功实现的一些解决方案:

1. 找到一些方法来了解是否有垂直滚动条，并在某处添加填充或边距以将标题单元格和数据单元格的内容插入，以保持对齐。我还没有找到一种简单的方法来获取可能有或没有滚动条的容器，然后我认为询问它是否有滚动条的逻辑会很脆弱。另外，只是尝试在我认为应该添加的位置添加填充并不能有效地覆盖内容。
2. 想办法让带有滚动条的容器在有滚动条的情况下推到网格外面。这与 #1 的问题基本相同，因为那个人很滑。
3. 想办法用我自己的替换滚动条。似乎有人做了一个分支，让您可以使用特定的库来执行此操作，但我们绑定(bind)到 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% 的宽度。
• 丑陋的一面:获取“视口(viewport)”的宽度，遍历并根据您为所有列提供的百分比计算实际像素，如果您使用上述技术检测到垂直滚动条，则留下 15 像素。