Question

只要光标悬停在特定的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>

Answer 1

我会使用不同的方法。当我将鼠标悬停在这个特定的DOM元素上时，我会执行一个函数，它向下滚动到底部，持续x秒。然后我会执行另一个函数，当光标离开这个元素时停止向下滚动。您可以通过检查是否已经在页面底部执行向下滚动来提高性能。

Answer 2

我希望这会对你有所帮助。根据您的要求更改moveDown和moveUp功能。这是javascript代码，将此代码更改为角度TypeScript。

HTML

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

的JavaScript

  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();
  }

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

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

2 个答案: