CODEWITHSUNDEEP
angular
Udaya Vani
Udaya Vani

Reputation: 515

Scroll div on Mouseover with Angular 4/6 Animation

Looking for Angular animation to scroll div top and bottom on mouse over, on mouseout we should clear the scrolling.

Exactly similar kind of animation.

http://www.solucior.com/13-Scroll_div_with_javascript.html

function scrollDiv(divId, depl) {
   var scroll_container = document.getElementById(divId);
   scroll_container.scrollTop -= depl;
   timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 30);
}

This is Java script code. But i am looking for Angular Code.

Upvotes: 0

Views: 1384

Answers (1)

Benjamin Kindle
Benjamin Kindle

Reputation: 1844

Some of the steps are pretty basic Angular. I'm sure the community would appreciate it if you showed that you put some effort into finding the solution yourself. specifically, parts 1 and 3 are pretty basic. I'll give you the benefit of the doubt and assume that you gave it an effort and are still stumped :-)

  1. instead of onmouseover= and onmouseout=, you will use (mouseover)= and (mouseout)=, putting a function from the component's class after the =. Learn more about event binding
  2. instead of passing an ID, in Angular you can use a template reference variable. In the element tag that you want a reference to, add #someElementName, and then when you call the function on a mouse event, pass someElementName. Learn more about template reference variables
  3. timer1 will become a class member of the component (this.timer1 = setTimout...). Learn more about component basics

a stackblitz with the result

Upvotes: 2

Related Questions