Ionic Scroll Bottom ?*


#1

Please help . How can ı scroll bottom of list ?
I created chat page . When load page, i want to scroll to bottom .


#2

Did you manage to solve this?


#3

i didn’t solve it :frowning:


#4

No answer ? Please someone help!


#5

scrollBottom() don’t work?


#6

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


#7

Another way of doing is:

let dimensions = this.content.getContentDimensions();
this.content.scrollTo(0, dimensions.scrollBottom, 0);

#8

Coming in beta 5.


#9

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);
    }
}

#10

Please will this work for javascript as well as i am not using typescript???
Thanks


#11

This works for me. But I had to change how to initialize the Content.

@ViewChild(Content) content: Content;

Source:


#12

Yeah this works.
check this out by @smukov


#13

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
}

#14
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);
  }
}

#15

please give me a full refe code


#16

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);

Disable automatic scroll when adding new items to list
Partially auto-scroll issue
#17

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


Focus input programatically + scroll
Focus input programatically + scroll
#18

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.

Capture


#19

Thanks a lot! Works perfectly well! Great Job!


#20

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!