Working with UI-Router in Angular 1.7, I am facing an issue wherein I want to change the state and wait for the content to load before scrolling to the bottom of the page.
// Using a class method
onCreate() {
this.post().then(response => {
this.$state.go('root.post.edit', { postId: response.data.id });
this.Alert.register('success');
})
.then(() => scrollToBottom()) // Scroll occurs too soon
.catch(e => this.handleError(e));
}
//scrollToBottom.js
const scrollToBottom = () => {
const scrollContainer = document.querySelector('.app-page-content');
scrollContainer.scrollTop = scrollContainer.scrollHeight;
};If I use setTimeout(() => {...}, 600) to wrap the contents of the scrollToBottom function, it allows time for loading and scrolling to the bottom of the loaded page. Otherwise, the scrollContainer's height is not yet calculated as it's still in the loading state when scrollContainer.scrollHeight is called.
Is there a way to ensure that the content has fully loaded on the route you're navigating to before proceeding?