[ionic v4] - Scrolling issues - scrollToPoint bugs when using a duration

[gmartinpro]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

**Ionic:

   ionic (Ionic CLI)          : 4.0.2 (C:\Users\gabriel\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.2 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

Environment:

   ANDROID_HOME : C:\Users\gabriel\AppData\Local\Android\Sdk
**

Describe the Bug
If i set a duration on scrollToPoint(), the scrolling won't run fully.

Steps to Reproduce
Steps to reproduce the behavior:

In code :

1. Create a scrollable content with a menu where each
2. redirect on a
   in the
3. Add an "addEventListener('click')" event handler on the menu
4. Use the function 'ScrollToPoint()' or 'scrollByPoint()' on the scrollElement to scroll to the
   selected.
5. See error

As user :

1. Click on a number in the menu

Related Code

register.component.ts :

import {Component, ViewChild} from '@angular/core';
import {AfterViewInit} from '@angular/core';

@Component({
    templateUrl: 'register.component.html',
    styleUrls: ['register.component.scss']

})

export class RegisterComponent implements AfterViewInit {
    @ViewChild('theScrollEl') theScrollEl;

    scrollElement;
    divOffsetTop;

    constructor() {}

    ngAfterViewInit() {

        setTimeout(() => {
            this.scrollElement = this.theScrollEl.nativeElement.getScrollElement();
            console.log(this.scrollElement);
            this.doTheScroll();
        }, 40);
    }

    doTheScroll() {
        let container = document.querySelector('.container');
        let div = container.querySelectorAll('.scroll-test');
        let menu = document.querySelector('#menu');
        let that = this;

        menu.addEventListener('click', function (ev) {
            let target = ev.target;
            // console.log();
            let newId = 'div-' + target.id;

            for (let i = 0; i < div.length; i++) {
                if (newId === div[i].id) {
                    // console.log(h2[i].offsetTop);
                    that.divOffsetTop = div[i].offsetTop;
                }
            }
            that.scrollElement.scrollToPoint(0, that.divOffsetTop, 200);

console.log('divOffsetTop', that.divOffsetTop, '//', 'scrollElement.scrollTop', that.scrollElement.scrollTop);

        });

    }
}

register.component.html :

<ul id="menu">
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
    <li id="five">5</li>
</ul>

<ion-content #theScrollEl>
    <div class="container">
        <div id="div-one" class="scroll-test">
            Test  div-one<br>
        </div>
        <div id="div-two" class="scroll-test">
            Test div-two<br>
        </div>
        <div id="div-three" class="scroll-test">
            Test div-three<br>
        </div>
        <div id="div-four" class="scroll-test">
            Test div-four<br>
        </div>
        <div id="div-five" class="scroll-test">
            Test div-five<br>
        </div>
    </div>
</ion-content>

Expected Behavior
When you click on a "li" in the menu, it should scroll to the "div" offsetTop which has the good id with a duration of 200 ms.

Current Behavior
The scroll isn't totally executed.

Additional Information

Here is the console.log i used :

   console.log('divOffsetTop', that.divOffsetTop, '//', 'scrollElement.scrollTop', that.scrollElement.scrollTop);

And here is the result after clicking 5 times on <li id="two">2<li>

divOffsetTop 650 // scrollElement.scrollTop 0
divOffsetTop 650 // scrollElement.scrollTop 122
divOffsetTop 650 // scrollElement.scrollTop 248
divOffsetTop 650 // scrollElement.scrollTop 342
divOffsetTop 650 // scrollElement.scrollTop 400

It only happens when I use a duration, if I set the duration to "0" it works perfectly.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.