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