mardi 29 mars 2016

Determine whether scroll to bottom in div

I have ember app.In which I have icon in navbar which when clicked show a dropdown with notification.I have set the max-height of dropdown as 390px.Now I want to determine when the user has reached the bottom to the dropdown so that I can make an ajax call to the server for more data.

html

<div class="ps-content">
.....notification content.....
</div>

css

.ps-container{
  max-height: 390px;
  position: relative;
}

js

didInsertElement: function(){
    $('.ps-content').on('scroll', $.proxy(this.didScroll, this));
  },
  willDestroyElement: function(){
    $('.ps-content').off('scroll', $.proxy(this.didScroll, this));
  },

  didScroll: function(){
    if (this.isScrolledToBottom()) {
      this.sendAction('loadMore');
    }
  },

  // we check if we are at the bottom of the page
  isScrolledToBottom: function(){
      var distanceToViewportTop = WHAT SHOULD I AM DO HERE ?
      var viewPortTop = $('.ps-content').scrollTop();
      if (viewPortTop === 0) {
        return false;
      }   
      return (viewPortTop - distanceToViewportTop === 0);
  },

when I do $('.ps-content').height it is giving 390px.How to get the whole content height render into the dropdown ?

In the "viewPortTop" I am getting how much user has scrolled.But I am not able to figure out what should I do "distanceToViewportTop" So that When user reaches at bottom there difference is zero.I can't use documnet height and window height as it takes the whole page height.For Whole page it is documnet - window height to get the bottom page.What should I do for div ?




Aucun commentaire:

Enregistrer un commentaire