Ionic 2 scrollTop

I’m trying to create an elastic header in ionic 2 using an directive, here is what I have.

import {ElementRef, Directive} from 'angular2/core';

@Directive({
    selector: '[elastic]'
})
export class Elastic{
    header: any;
    scrollerHandle: any;
    constructor(el: ElementRef){
        this.el = el;
        this.header = document.getElementById('elastic')
    }
    ngAfterViewInit(){
        this.scrollerHandle = this.el.nativeElement.children[0];
       this.scrollerHandle.addEventListener('scroll', function(event){
    })
    
 }
}

what seems different from ionic 1 is that el.nativeElement.children[0] doesn’t seem to emit events when scroll is released when list is pulled down, it goes from something like -100 directly to zero so I don’t seem able to animate those steps, Is there any other way to do it?

Am I asking the wrong questions or is there something wrong with how I explained it?

Will I get more answers on stackoverflow?

how can it not be regarding ionic 2 it’s a directive I use in ionic 2, and when I use the exact event listener in ionic 1, I get events when scroll is released al the way to zero, and when I do the same thing in ionic 2 I get nothing until it’s zero.

The example is not to get help with the entire code, I’m showing the example so the thing can be reproduced.

Very constructive to call someone lazy by the way…

I have a tutorial on building an elastic header in Ionic 2 here: http://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/

BUT it doesn’t work with the latest version and I’m yet to update it, it may help you though.

2 Likes

Hi!

Actually it was from your tutorial I got the inspiration, though even if I use your code and make it work by placing some parts in ngOnInit(){} instead of in the constructor.

Then pull the scroll part down when it’s at the top of the screen i first get minus from the event listener, but as I release there is no events until its back at zero, on ionic 1 there is events all the way down to zero

What this ends up with is that the scroll is released it bounces back and then when it’s at zero the elastic part updates it’s size instead of doing that for every step in the bounce.

Do I explain the problem well enough?

Actually this is something that seems to work for me. I would need then also (and plan to) to pull down the header on scroll up regardless the scroll position.

Have you tried it in simulator or on device?

In the browser it works for me to but thats only because there is no bounce in the scroll there.

Have some small progress

now this is just dirty mashup of a few solutions. On real device there is problem with proper anchoring of the header but there should be some easy css solution for this.

Does it animate back on device or does it jump back when scroll has ended?

I found scroll to top solution, it’s working fine at my end… :slight_smile: