我如何在角度自动滚动？

Question

我有一个动态组件，我水平添加材料卡。经过几张卡后，组件填充，我可以滚动组件。但是，我该如何水平自动滚动，以便我不必一直使用鼠标？

我已经尝试使用一些CSS属性等溢出等。

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

我期望它水平自动滚动。

这就是应该的样子：

但相反，它永远不会自动滚动。

当尺寸变化时，没有自动滚动div的自动功能。 我想您使用一些按钮动态添加卡？然后，您可以在添加卡时编程滚动！

这里是多种建议的解决方案：

Answer 1

您可以使用jQuery的方法“

scrollleft（）
”。只需将水平滚动设置为99999之类的东西即可确保它发生尽可能。

改变您的HTML元素的默认行为（请参阅此

Thread

）。

• 使用CSS指令scrollTo()将默认的滚动条位置设置在右侧（请参阅此
thread
• ） the是使用解决方案的一个示例2）：https：//angular-dfjmej.stackblitz.io
• 也许这不是您想要的确切渲染，但这只是设置的问题。 有几种自动滚动图像的方法：

通过更改其坐标来使自动元素使用 计时器

使用计时器自动滚动容器， here是第一个解决方案实现自动滚动的示例。

html

Answer 2

CSS

<div
  id="animation1"
  class="animatedElementsContainerStyle"
  (mouseover)="setAnimationsStatus('pause')"
  (mouseout)="setAnimationsStatus('animate')"
>
  <div id="animatedItem1" class="animatedItem">
    <div class="contentContainer">Item 1</div>
  </div>
  <div id="animatedItem2" class="animatedItem">
    <div class="contentContainer">Item 2</div>
  </div>
  <div id="animatedItem3" class="animatedItem">
    <div class="contentContainer">Item 3</div>
  </div>
  <div id="animatedItem4" class="animatedItem">
    <div class="contentContainer">Item 4</div>
  </div>
  <div id="animatedItem5" class="animatedItem">
    <div class="contentContainer">Item 5</div>
  </div>
  <div id="animatedItem6" class="animatedItem">
    <div class="contentContainer">Item 6</div>
  </div>
</div>

typescript

.animatedElementsContainerStyle {
  height: 160px;
  width: 500px;
  height: 140px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  position: relative;
}

.animatedItem {
  display: inline-block;
  width: 200px;
  height: 130px;
  position: absolute;
  background-color: yellow;
  font-size: 30;
  font-weight: bold;
  margin: 0 auto;
  cursor: pointer;
}
.animatedItem {
  display: inline-block;
}

.contentContainer {
  width: 100;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}