如何在 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

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