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

Question

is there a way how to repeat a function as long as the cursor is hovering over a specific dom element? I want to perform a scroll operation as long as long as the user is hovering over an arrow with an optional timeout. This task should be fullfillled without using jquery!

Here is my current code:

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

And the 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

I would use a different aproach. I would execute a function when hovering over this specific DOM element, that scrolls down to the bottom, lasting x seconds. And then I would execute another function that stops this scroll down when cursor goes away from this element. You can improve performance by checking if you are already at the bottom of the page befor executing scroll down.

Answer 2

I hope this will help you. Change moveDown and moveUp function based on your requirement. This is javascript code, change this code to angular 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();
  }

Click here to view demo, open console window and you can see the move up/down in the console window when mouse over Down/Up links. https://liveweave.com/bFG3OP