Please help . How can ı scroll bottom of list ?
I created chat page . When load page, i want to scroll to bottom .
2 Likes
Did you manage to solve this?
i didn’t solve it 
No answer ? Please someone help!
scrollBottom() don’t work?
2 Likes
This works for me:
<ion-content class="cards-bg" id="messagesContent">
...
</ion-content>
Controller:
var messagesContent = this.app.getComponent('messagesContent') as Content;
messagesContent.scrollTo(0, messagesContent.getContentDimensions().contentHeight, 700);
Note: If you need it during initialization, must call inside ngAfterViewInit()
Please vote for https://github.com/driftyco/ionic/issues/5907
5 Likes
Another way of doing is:
let dimensions = this.content.getContentDimensions();
this.content.scrollTo(0, dimensions.scrollBottom, 0);Coming in beta 5.
ES2015/ES6 Style ScrollToBottom
import {ViewChild} from 'angular2/core';
import {Page,Content} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/page1/page1.html',
queries: {
content: new ViewChild(Content)
}
})
export class Page1 {
constructor() {
}
scrollToBottom(){
let dimensions = this.content.getContentDimensions();
this.content.scrollTo(0, dimensions.scrollBottom, 0);
}
}
2 Likes
Please will this work for javascript as well as i am not using typescript???
Thanks
This works for me. But I had to change how to initialize the Content.
@ViewChild(Content) content: Content;
Source:
1 Like
Yeah this works.
check this out by @smukov
I am getting the error
"[ts] Property 'scrollBottom' does not exist on type ContentDimensions" .The properties of dimensions are as below:
{
"contentHeight": 465,
"contentTop": 64,
"contentBottom": 49,
"contentWidth": 325,
"contentLeft": 0,
"scrollHeight": 465,
"scrollTop": 0,
"scrollWidth": 325,
"scrollLeft": 0
}
1 Like
import { ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
export class Chat {
@ViewChild(Content) content: Content;
constructor( ) { }
ionViewDidLoad(){
let dimensions = this.content.getContentDimensions();
this.content.scrollTo(0, dimensions.scrollHeight+100, 100);
}
ionViewDidEnter() {
let dimensions = this.content.getContentDimensions();
this.content.scrollTo(0, dimensions.contentHeight+100, 100);
}
}
1 Like
please give me a full refe code
The same can be done using .scrollTop, .scrollHeight present in JavaScript.
They are use to get scrolled position for a particular element.
Usage -
var myElement = document.getElementById('my-element'); // Container which has scrollable vertical contents
myElement.scrollTop; // Gives scrolled poins from top
myElement.scrollHeight; // Gives maximum scrollable vertical space
myElement.scrollTop = myElement.scrollHeight; // Setting the top scroll value to maximum allowed value
For animated scrolling -
$('body,html').animate({ scrollTop: 0}, 800);
I am using ngAfterViewChecked(). Mine code structure is -
home.html -
<ion-content padding>
<div #scrollMe id="messages-container" style="overflow: auto; height: 100%;">
// All messages elemets. Scroll
</div>
</ion-content>
home.ts -
import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements OnInit, AfterViewChecked{
// used for scrolling the pane
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
ngAfterViewChecked() {
this.scrollToBottom();
}
scrollToBottom(): void {
// method used to enable scrolling
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
}
}
Bonus - In case you have “Load More messages” button for chat app, within scrollToBottom(), you can write conditions to calculate previous height of container. But keep that variable global.
OR -
home.html -
<ion-content #scrollMe padding style="overflow: auto; height: 100%;">
<div id="messages-container">
// All messages elemets. Scroll
</div>
</ion-content>
home.ts -
import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements OnInit, AfterViewChecked{
// used for scrolling the pane
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
ngAfterViewChecked() {
this.scrollToBottom();
}
scrollToBottom(): void {
// methods used to enable scrolling
var elemObj:any = this.myScrollContainer;
if(this.clickedLoadMore.clicked && this.clickedLoadMore.data_added){
// If load more was clicked and data is available
elemObj.scrollTo(0, elemObj.getContentDimensions().scrollHeight - this.oldChatHeight, 0);
this.updatePreviousMessagesSize();
}
else if(this.messages.length > this.previousMessagesSize){
// If new message has came in messages array
elemObj.scrollToBottom();
this.updatePreviousMessagesSize();
}
}
}
I have included my codes where I am comparing my previous message height with the new one to maintain current view when new messages loads after clicking on Load More button.
I have calculated this.oldChatHeight in other part of overall code which is -
this.oldChatHeight = elemObj.getContentDimensions().scrollHeight;
Notice I have used ElementRef in @ViewChild('scrollMe') private myScrollContainer: ElementRef instead of Content which is an alternate of the way mentioned in Ionic document
3 Likes
Whether in typescript or plain JavaScript following should work. it is simple. Try it out:
var element = document.querySelector('#giveAnIdToTopElementForExampleContentOrWhatever');
console.log(element);
element.scrollIntoView();
For scrollIntoView support, check MDN documentation or following list take from MDN.
Thanks a lot! Works perfectly well! Great Job!
Btw, in iOS the scroll refreshes every second or so, and when I scroll up, it automatically refreshes and scrolls the view to the bottom again, over and over again. Any idea how to fix this? Thanks!
1 Like