Check in element is present onScreen

Ionic Framework ionic-v3
1

Hello all,

how can we know if an element is present / visible on screen?
Example, I have a list of cards, and want increment a view counter according to the card / cards visible.

I used to use the Jquery Plugin “onScreen”, but how can I do it with angular 2 / ionic 2?

Thanks in advance.

1 Like
2

It looks like that project is no longer dependent on jQuery. Have you tried using it? In general, Angular2’s event model plays much more nicely with others than Angular1’s did. I have found mixing and matching other libraries like this (even jQuery plugins) much less troublesome than it used to be.

3

Hello,

Thanks! I’ve got it to work!
A few tips to anyone else who might want to use this plugin as well.

We must instantiate it after the view initialization.
We also must specify the element as the container. As we can have more than one element we must specify the container with our page main class like this:

ngAfterViewInit() {
    const os = new OnScreen({
      tolerance: 0,
      debounce: 100,
      container: '.home-page scroll-content'
    });
    
    
    os.on('enter', '.post-message', (element) => {
      console.log(element);
    });
    console.log(os);
  }

That’s it :wink:

1 Like
4

Hi there,

I can’t make it work

My element is not detected. Is it possible to make a infinite list triggering events with this lib ?

5

Please, can you tell me how can I add this component to Ionic 3 ??? Thank you.

6

If you use Waypointsjs with Ionic 4, you can try a configuration similar to this:

const homeContent = document.querySelector('.homeContent')
const innerScroll = homeContent.shadowRoot.querySelector('.inner-scroll')
const element = homeContent.querySelector('.my-element')
const waypoint = new Waypoint({
  context: innerScroll,
  offset: '30%',
  element: element,
  handler: function (direction) {
    console.log('on scrolling', direction, this.element)
  }
})

It works very well, check my website => https://proyecto26.com/

Regards, Nicholls

1 Like