PrimeNG p-tree 水平滚动条隐藏，直到我向下滚动到 div 的底部答案

【问题标题】：PrimeNG p-tree Horizontal Scrollbar hidden until I scroll down to the bottom of the divPrimeNG p-tree 水平滚动条隐藏，直到我向下滚动到 div 的底部
【发布时间】：2020-04-21 04:36:50
【问题描述】：

这是来自 PrimeNG 论坛的复制/粘贴，我还没有被“批准”提出这个问题，所以我想我会试一试。

我到处搜索，我很惊讶地发现似乎只有我一个人遇到了这个问题。在另一篇 SO 帖子中有关于 PrimeNG DataTable 使用 [scrollable] 属性的建议，但可滚动不是 p-tree 的属性。

无论如何，我的问题。我有一个包含大量分层对象的 p-tree 组件。当我将它们展开到显示垂直滚动条的位置时，一切都很好。但是，当我展开更多节点以使溢出向右时，隐藏了水平滚动条。直到我一直向下滚动到树的底部，我才能看到水平滚动条。我已经尝试了各种 CSS 模块，并使用了检查的 ui-tree div，但我找不到任何似乎有效的东西。

2 注意：将溢出：自动更改为溢出：可见只是完全消除了垂直滚动条，并且内容向南消失，离开可见页面。将溢出更改为滚动会创建一个水平滚动条，但它只是一个空条，我需要向下滚动才能看到实际的滚动条。

这是我的 ui-tree CSS：

:host ::ng-deep .ui-tree {
  border: 1px solid #adabab;
  border-radius: 0px 5px 5px 0px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #eaeaea;
  padding-right: 5px;
  width: 22em;
  max-height: 75vh;
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

截至 4 月 1 日，我正在使用带有 PrimeIcons 的最新 PrimeNG 和 Angular 9。不幸的是，由于适当的问题，我无法发布我的代码和/或 HTML，但如果没有人有解决方案，我可以创建一个小提琴/ stackblitz/plunkr，但这需要一些时间，但如果有必要我会这样做。

请参阅此paint example，了解我正在经历的事情。简而言之，水平滚动条是隐藏的，直到我一直向下滚动，并且无论垂直滚动条的位置如何，我都需要它可见并正常工作。

非常感谢任何帮助或建议！

谢谢。

【问题讨论】：

标签： html css angular primeng

【解决方案1】：

解决了我自己的问题，虽然感觉有点混乱和骇人听闻。把这个留在这里，以防其他人遇到这个问题，或者有一个更优雅的方法来解决它，而不需要一堆 :host 和 ::ng-deep，因为它们在未来的某个时候会消失。

我最终不得不为以下内容创建额外的 CSS 规则：

:host ::ng-deep .ui-tree {
  border: 1px solid #adabab;
  border-radius: 0px 5px 5px 0px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #eaeaea;
  padding: 0em 0em;
  padding-right: 5px;
  width: 22em; /* This constrains the width and creates the horizontal scrollbar when a p-tree node is expanded past this width. */
  line-height: 15px !important;
  max-height: 75vh;
  overflow: overlay; /* Changed from auto to overlay */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* This creates the horizontal scrollbar visible on top of the inner divs */
:host ::ng-deep .ui-tree .ui-tree-container {
  overflow: initial;
}

/* This keeps a margin between horizontal overflow and the vertical scrollbar. Without it content would be hidden behind the scrollbar */
:host ::ng-deep .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {
  margin-right: 10px;
}

【讨论】：