如何在 Angular 中自动滚动？

Posted 2023-03-05

【中文标题】如何在 Angular 中自动滚动？

【英文标题】：How do I auto scroll in Angular?

【发布时间】：2019-06-15 21:34:54

【问题描述】：

我有一个动态组件，我在其中水平添加材质卡。几张卡片后，组件被填满，我可以滚动组件。但是如何让它自动水平滚动，这样我就不用一直用鼠标了？

我已经尝试过使用一些 css 属性，例如溢出等。

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

我希望它会水平自动滚动。

它应该是这样的：

但它从不自动滚动。

【问题讨论】：

您能否澄清一下-您的意思是您不必用鼠标单击滚动条，还是想让代码自动滚动？如果是鼠标问题，shift + 滚轮是水平的，或者大多数触控板都支持多点触控手势。

没有。我的意思是：组件总是停留在同一个位置，即使我添加了更多卡片。我想要的：它应该始终自动滚动到右侧，以便显示最新的卡片。但是当然也应该可以用鼠标滚动。我希望你明白我的意思。

我从这个答案***.com/questions/43945548/… 中查看了这个stackblitz stackblitz.com/edit/…，你可以在添加卡片时总是调用scrollIntoView 之后没有大小元素吗？

【参考方案1】：

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

这里有多个建议的解决方案：

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

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

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

【讨论】：

如何在 TypeScript 中使用 scrollLeft()？可以举个例子吗？

我使用 stackblitz 链接编辑了我的答案，您可以在其中找到解决方案。