html - 如何在 Angular 中自动滚动？

Question

我有一个动态组件，我可以在其中水平添加 Material 卡。经过几张卡片后，组件被填满，我可以滚动组件。但是我怎样才能让它自动水平滚动，这样我就不用一直使用鼠标了？

我已经尝试过使用一些 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

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