Javascript 鼠标悬停在元素上时重复滚动功能

有没有一种方法可以在光标悬停在特定dom元素上时重复函数？只要用户将鼠标悬停在带有可选超时的箭头上，我就想执行滚动操作。此任务应在不使用jquery的情况下完成

这是我目前的代码：

public overDown() {
    this.tabList.nativeElement.scrollBy(0, 10);
    const element = this.tabList.nativeElement;
    if(element.offsetHeight + element.scrollTop >= element.scrollHeight) {
      console.log('Bottom Limit');
    }
  }

  public overUp() {
    this.tabList.nativeElement.scrollBy(0, -10);
    const element = this.tabList.nativeElement;
    if(element.scrollTop === 0) {
      console.log('Top Limit');
    }
  }

还有HTML

<div class="list-arrow-up" (mouseover)="overUp()">▲</div>
  <ul #tabList>
    <li><!--several List items --></span></li>
  </ul>
  <div class="list-arrow-down" (mouseover)="overDown()">▼</div>

▲



▼

我会使用不同的方法。 当鼠标悬停在这个特定的DOM元素上时，我会执行一个函数，它会向下滚动到底部，持续x秒。 然后我会执行另一个函数，当光标离开这个元素时，停止向下滚动。

---

在执行“向下滚动”之前，您可以通过检查是否已在页面底部来提高性能。

我希望这将对您有所帮助。根据您的要求更改

moveDown

和

moveUp

功能。这是javascript代码，请将此代码更改为angular TypeScript

HTML

单击此处查看演示，打开控制台窗口，当鼠标悬停在向下/向上链接上时，您可以在控制台窗口中看到向上/向下移动。

---

您需要通过鼠标上方的setInterval（）添加滚动条，然后清除鼠标上的间隔。让您的

结束….（）

函数启动循环并添加一些

mouseout

事件来停止循环？你们能给我提供一些示例代码或一个工作示例的链接吗？你们能用这种方法将一个示例链接到启动和停止函数吗

<a onmouseover="overDown()" onmouseleave="stopMoveDown = true">Down</a>
<a onmouseover="overUp()" onmouseleave="stopMoveUp = true">Up</a>

  var stopMoveDown = false;
  var stopMoveUp = false;

  function moveDown() {
     console.log('Move Down');
     if(!stopMoveDown)
        setTimeout(moveDown, 100);
  }

  function moveUp() {
     console.log('Move Up');
     if(!stopMoveUp)
        setTimeout(moveUp, 100);
  }

  function overDown(){
    stopMoveDown = false;
    moveDown();
  }

  function overUp(){
    stopMoveUp = false;
    moveUp();
  }