title: scroll with scrollIntoView not working in chrome when call in HostListener event
body: <p>i write a function for scroll page and when i call this function in HTML (click), it is work (it is true in fire fox and chrome)</p>
  
  <p>but when i call this function in type script code it is work in fire fox and do not work chrome</p>
  
  <pre><code> @ViewChild('scrollCourse', { static: false })
   scrollCourse: ElementRef;
  </code></pre>
  
  <p>this is my scroll function </p>
  
  <pre><code>  async scrollToCourse() {
      this.desableFirstScroll=true
      await this.scrollCourse.nativeElement.scrollIntoView({ behavior: 'smooth' });
      this.desableFirstScroll=false
    }
  </code></pre>
  
  <p>and this is HTML element</p>
  
  <pre><code>&lt;div #scrollCourse class="container-fluid multi-carousel kargah"&gt;
  </code></pre>
  
  <p>when i click this button all of them is true</p>
  
  <pre><code> &lt;button class="btn" type="button" color="success"
    rounded="true" (click)="scrollToCourse()"&gt;&lt;i class="fas fa-chalkboard-teacher icon"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>but i want call this function when page is scrolling</p>
  
  <pre><code>@HostListener("window:scroll", ['$event'])
  @HostListener("window:load", ['$event'])
  getScreenSize(event?) {
   this.scrHeight = window.innerHeight;
   const number = window.pageYOffset || document.documentElement.scrollTop || window.scrollY || 0;
   // set fix kargah nav
   if (number &gt; this.scrHeight &amp;&amp; number &lt; this.scrHeight + 150 &amp;&amp; this.kargahScrollFirst) {
    if(this.desableFirstScroll == false){
  
      this.scrollToCourse();
      this.kargahScrollFirst = false;
    }
   }
   if ((number &gt; (this.scrHeight + 150) || number &lt; this.scrHeight) &amp;&amp; !this.kargahScrollFirst) {
      this.kargahScrollFirst = true;
   }
  </code></pre>
  
  <p>i tested call function proccess with log and function calling is true</p>
  
  <pre><code>async scrollToCourse() {
   this.desableFirstScroll=true
   await this.scrollKargah.nativeElement.scrollIntoView({ behaviour: "smooth" });
   console.log("chorm",this.scrollCourse.nativeElement);
   this.desableFirstScroll=false
  }
  </code></pre>
  
  <p>this log return element information</p>
  
  <p>my log when call function in scrolling event:</p>
  
  <pre><code>chorm &lt;div _ngcontent-asg-c5 class=​"container-fluid multi-carousel kargah"&gt;​&lt;div _ngcontent-asg-c5 class=​" row multi-slide-box"&gt;​…​&lt;/div&gt;​&lt;/div&gt;​
  </code></pre>