Problem with InsertBefore and scroll behavior inside ionic+angular
Ionic version:
5.3.4
Current behavior:
When Inserting an element using element.insertBefore() the container view will always try to go to top even if not asked to.
Expected behavior:
When inserting a new element while not being at the top scroll of the container (container.scrollTop > 0) the container view shouldn’t scroll back to top and keep its position regardless of elements being added on top.
Steps to reproduce:
use element.insertBefore()
Here is a repo to tryout the problem on iOS only for now
Repo showing the problem
Related code:
Other information:
I found a way to try to fix the issue but it’s not very good and I don’t recommend it :
Use gestures to scroll from one element to another and insert elements when the scroll is stopped, at the moment of inserting the element, take the actual scroll + the height of the element (el.getBoundingClientRect().height) and add it to present scrollTop of the container. This way every time an element is added ionic will scroll to top and we scroll back to the element. Controlling the scroll let us stop, insert, refresh scrolling, let user able to scroll again. BUT this wasn’t the wanted behavior.
Ionic info:
Ionic:
Ionic CLI : 6.11.11 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.4
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 2.4.2
@capacitor/core : 2.4.2
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v14.12.0 (/usr/local/bin/node)
npm : 6.14.8
OS : macOS Catalina
Regards.