水平滚动到特定元素

Question

我在Angular中创建了以下组件。 它基本上是一种树组件。

请注意以下事项：

• 这棵树有几个分支。
• 它由交替颜色的节点组成。
• 所选节点标有蓝点。
• 树不适合屏幕，这就是为什么有一个水平滚动条。
• 每个节点都有唯一的ID（即<div id="...">）

然而，这个组件工作正常。 我不知道如何添加以下功能：

• 当焦点发生变化时（换句话说，另一个节点变为活动状态），我希望此节点始终在屏幕上可见。这意味着无论何时选择节点， webbrowser都必须自动滚动到左侧或右侧。它必须滚动或跳转，直到特定的<div>可见。

如何使用javascript或打字稿来完成？

编辑：

我想使用这个javascript是更好的导航工具的基础。

• 按钮在树中来回移动
• 按钮向左/右跳10个节点。
• 按钮跳到后面。
• 按钮跳转到开头。

此外，当新节点添加到树的背面时，此时用户必须手动向右滚动。我想让它立即可见，自动显示。

这些是我真正的目标：）

Answer 1

如果您需要的唯一滚动机制是自动滚动机制，我会避免尝试完全使用浏览器的内置滚动机制，只需使用节点的ElementRef获取相对于其容器的水平位置，然后应用CSS 'translate'根据需要移动它。使用CSS过渡和动画让它看起来“漂亮”会更容易。但是，如果您仍然需要手动滚动行为（即，用户仍需要能够使用滚动条滚动），您还必须编写滚动条指令/解决方案，这可能最终比问题需要更多的努力。

此页面有一种用于水平滚动的hacky变通方法 - https://css-tricks.com/pure-css-horizontal-scrolling/

过去使用'scrollTop'和'scrollLeft'的问题是你不能将转换应用于这些属性，所以它们最终看起来非常生涩而没有在javascript中实现自定义缓动函数。