Ionic 2 - How to integrate an easter egg overscroll

Hi !

Is there a way to do an easter egg overscroll when scrolling up the ion-content?
Meaning an image would be initially hidden, and when the user scrolls up the screen, the image becomes visible. This would actually use the iOS elastic bouncing.

I already tried to give the image a negative margin, but somehow my image is cropped or not displayed at all inside the ion-content when scrolling up.

You can see below a screenshot.

Thanks for your help!

Not sure I understand what you need, but you can use @ViewChild to programmatically scroll to different points in your list. So you could render the page, mechanically scroll down, then set an ngIf to true, so people would see something for the first time if they scrolled back up.

Yes, you almost have it with the negative margin, unfortunately you need a fixed position element like this to get WebKit to render it:

CSS:

page-home {
  ion-content {
    div.overflow {
      position: relative;
      margin-top: -228px;
      padding-top: 228px;
      background: url('http://www.freedigitalphotos.net/images/category-images/100.jpg') no-repeat top left;
      ::before {
        content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
        display: block;
        z-index: -1;
        position: fixed;
        height: 228px;
        width: 100%;
      }
    }
  }
}

Simple Page:

@Component({
  template: '<ion-content><div class="overflow"><div></div></div></ion-content>',
  selector: 'page-home'
})
export class HomePage { }

Setup the above example and make sure it works and then you get try to adapt it to your own page. It’s pretty sensitive, has to be just so.

This post I made earlier uses similar solution…

Nice trick, thanks a lot!

The only thing is that when I scroll up and then let the bouncing do its thing (scroll back down), here is what happen. The bottom overflow of ion-content which was hidden when scrolled up is now hidden for a second after releasing the bouncing. After that second, everything sets back to normal.
Do you have an idea on how to fix that?

Can you check if it happens in Safari on the device? I haven’t tested this method within Cordova yet so it might be related to that. It’s not happening in my app on Safari.

It works fine on safari, it’s probably related to Cordova then.
I’ll try to make it work but If you have any idea please let me know.
Anyway, thanks for you solution! :wink:

Maybe you could make a simple html+css version of the code, with the fixed position hack and post to StackOverflow and see what they say. Let me know the link if you do! :+1:

Actually I have a fix for this but its also a hack. Just add translate3d css to all the items on the page (or at least the ones that were disappearing):

page-home {
  ion-content {
    * {
      transform:translate3d(0,0,0);
    }
    div.overflow {
      position: relative;
      margin-top: -228px;
      padding-top: 228px;
      background: url('http://www.freedigitalphotos.net/images/category-images/100.jpg') no-repeat top left;
      ::before {
        content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
        display: block;
        z-index: -1;
        position: fixed;
        height: 228px;
        width: 100%;
      }
    }
  }
}
1 Like

It works perfectly !! Thanks a lot for your help, you’re the best :thumbsup:

1 Like

Sorry to bother you again :sweat_smile:

I tried to use your solution but this time when scrolling down.
A drawing is initially hidden, and only appears when initializing the bottom bouncing.

I tried different things but I could not get the drawing to be initially hidden.
Actually, I think the same hack cannot be used for that.
What do you think ?

Assuming it even could work, the problem with the bottom is that the fixed position element would be at the bottom of the screen, which isn’t necessarily the bottom of the content (if it were longer than the screen).

I’m thinking the way to do this case would be to use the ionScrollEnd on the page component. If the scrollBottom is greater than the contentHeight minus the height of the Easter egg, then scrollTo(0, contentHeight minus the height of the Easter egg). You might have to prevent the default bounce behavior, not sure how that would look together with this.

Actually I thought about it more, here is the solution:

Simple page:

import { ViewChild, Component } from '@angular/core';

import { Content } from 'ionic-angular';

@Component({
  template: '<ion-content><div [style.top]="easteregg_top" class="overflow"></div><ion-card><ion-item *ngFor="let item of items">{{item.name}}</ion-item></ion-card></ion-content>',
  selector: 'page-home'
})
export class HomePage {
  @ViewChild(Content) content: Content;

   easteregg_top: string = '-9999px';

   items = [];

   ionViewDidEnter() {

    for (let i=0; i<100; i++) {

      this.items.push({ name: 'Item '+i });
    }

    setTimeout(() => {
      this.easteregg_top = this.content.getContentDimensions().scrollHeight + 'px';
    }, 1000);
  }
}

CSS:

page-home {
  ion-content {
    * {
      transform:translate3d(0,0,0);
    }
    div.overflow {
      position: fixed;
      height: 228px;
      width: 100%;
      top: -9999px;
      margin-bottom: -228px;
      background: url('http://www.freedigitalphotos.net/images/category-images/100.jpg') no-repeat top left;
    }
  }
}

Hope that works… :v:

Edit: you’ll have to update the easteregg_top whenever the height of the content changes, I’m sure that will be pretty simple.

1 Like

:astonished: :tada:

THANK YOU !!!

1 Like