Continuously execute the scroll function as long as the cursor remains over the element

Question

Continuously execute the scroll function as long as the cursor remains over the element

Is there a method to continuously execute a function while the cursor hovers over a specific DOM element? I need to trigger a scroll action whenever the user hovers over an arrow, with an optional timeout feature. This requirement must be met without utilizing jQuery!

Check out my current code snippet:

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

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

Here's the corresponding HTML:

<div class="list-arrow-up" (mouseover)="onHoverUp()">▲</div>
  <ul #tabList>
    <li><!-- Multiple list items --></span></li>
  </ul>
  <div class="list-arrow-down" (mouseover)="onHoverDown()">▼</div>

javascript html css angular

Answer 1

Answer №1

For a unique solution, I propose trying a new method. Implementing a function triggered by hovering over a particular DOM element that smoothly scrolls to the bottom over a specified duration. Additionally, including a function to halt the scrolling when the cursor moves away from the element would enhance user experience. To optimize performance, consider checking if the page is already scrolled to the bottom before initiating the scroll action.

Answer 2

For a unique solution, I propose trying a new method. Implementing a function triggered by hovering over a particular DOM element that smoothly scrolls to the bottom over a specified duration. Additionally, including a function to halt the scrolling when the cursor moves away from the element would enhance user experience. To optimize performance, consider checking if the page is already scrolled to the bottom before initiating the scroll action.

Answer 3

Answer №2

Feel free to customize the moveDown and moveUp functions according to your needs. This code snippet is in JavaScript, but you can easily convert it to Angular TypeScript.

Here's the HTML:

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

And the original JavaScript code:

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

To see a demonstration of these functions in action, click the following link: Live Demo. Make sure to open the console window to observe the moving up/down messages when hovering over the Down/Up links.

Answer 4

Feel free to customize the moveDown and moveUp functions according to your needs. This code snippet is in JavaScript, but you can easily convert it to Angular TypeScript.

Here's the HTML:

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

And the original JavaScript code:

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

To see a demonstration of these functions in action, click the following link: Live Demo. Make sure to open the console window to observe the moving up/down messages when hovering over the Down/Up links.

Continuously execute the scroll function as long as the cursor remains over the element

Answer №1

Answer №2

Similar questions

Tips for displaying the date of a JSON response in Angular HTML format?

`Zooming and scrolling feature within a masked image`

Turn off the dynamically generated multiselect dropdown feature (using a plugin) in an angular application

How about connecting functions in JavaScript?

Tips on showcasing jQuery autocomplete suggestions on different fields?

"CSS styles applied to the body element do not automatically transfer to the h1

Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

How do we handle parent elements of clicked elements using Javascript event delegation?

What are the steps for implementing middleware that relies on a socket connection?

I need help with my calendar that only displays months with 31 days! Can anyone assist me, please?

Is it possible to combine multiple jQuery selectors for one command?

The sticky position is malfunctioning even when there is no parent element with the overflow hidden property

Is there a way to open Internet Explorer using a specific URL from a different browser?

Struggling to accurately determine the intersection face vertex positions in Three.js

Customizing upload directories in elfinder for dynamic path generation

How to retrieve errors from the backend when uploading an array using Angular?

Oops! Looks like there was an issue with defining Angular in AngularJS

Navigating the browser view across an extensive HTML page without relying on scrollbars

Why are my AngularJs elements not appearing in the print dialog window?

Create a composition of several debounce promises in JavaScript