CODEWITHSUNDEEP
angularjs-scrollintoview
Tommazo
Tommazo

Reputation: 87

scrollIntoView() Not working on input change or blur

I have an input field that either on (blur) or on (change) triggers a function that should scroll the page to the next element block. For reasons I ignore it doesn't work, although it works fine when used on (click) with buttons. I am also sure that the function gets called properly. It simply looks like scrollIntoView gets ignored. Do you guys know what could be the reason?

<input type="number" (change)="scrollToNext(i)"">

private scrollToNext(i) {
   this.arrayOfElements[i + 1].scrollIntoView({behavior: 'smooth', block: 'start'})
}

Upvotes: 3

Views: 1504

Answers (2)

DDolan
DDolan

Reputation: 31

I have found that onChange events seem to block certain transitions, I'm not sure why.

But a work-around is to call some callback such as setTimeout:

private scrollToNext(i) {
    let arr = this.arrayOfElements;

    setTimout(() => {
        arr[i + 1].scrollIntoView({behavior: 'smooth', block: 'start'});
    }, 100);
}

Upvotes: 3

junlan
junlan

Reputation: 261

Firstly check if browser support this function https://caniuse.com/#feat=scrollintoview

Secondly The element may not be scrolled completely to the top or bottom depending on the layout of other elements.

Upvotes: 0

Related Questions