如何在Angular中自动滚动？

Question

我有一个动态组件，可以在其中水平添加物料卡。插了几张卡片后，该组件就装满了，我可以滚动该组件。但是如何使它自动水平滚动，这样我就不必一直使用鼠标了？

我已经尝试过使用某些CSS属性（例如溢出等）。

.blocksWrapper {
  display: flex;
  overflow: auto;
  min-height: 305px;
}

我希望它可以水平自动滚动。

它应该是这样的：

但是，它永远不会自动滚动。

Answer 1

没有自动功能，可在大小更改时自动滚动div。
我想您使用某些按钮动态添加卡？然后您可以在添加卡时以编程方式滚动！

以下是建议的多种解决方案：

• 您可以使用jquery的方法“ scrollLeft()”。只需将水平滚动设置为99999之类的内容即可，以确保它尽可能远。
• 更改html元素的默认scrollTo()行为（请参见此thread）。
• 使用css指令direction: rtl将默认滚动条位置设置在右侧（请参见此thread）

以下是使用解决方案2）的示例：https://angular-dfjmej.stackblitz.io

也许这不是您想要的确切渲染，但这只是设置问题。