Problem with InsertBefore and scroll behavior inside ionic+angular
When Inserting an element using element.insertBefore() the container view will always try to go to top even if not asked to.
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:
Here is a repo to tryout the problem on iOS only for now
Repo showing the problem
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: 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