I'm using a "universal" piece of js that should detect if the user has scrolled to the bottom of the document:
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
//ajax code here
}
});
As the user scrolls, new content should load via the ajax call.
I would have expected the code to fire when I scroll DOWN, but the condition is actually firing when I scroll back to the TOP of the page, so it's basically doing the opposite of what it's "supposed" to do.
I've seen this solution being used in many examples, such as:
https://stackoverflow.com/a/17078097/1623095
My debugging messages:
console.log($(window).scrollTop());
console.log($(document).height());
console.log($(window).height());
These output when scrolling to the top:
0
1956
1956
And bottom:
961
1956
1956
The only plugin being loaded in my page is jquery (1.10.0.min), due to the nature of the project, I cannot link to the page.
Thoroughly confused by the dom behavior here.
I solved this some time before for someone else.
Have a look here:
Code
$(window).scroll(function () {
//- 10 = desired pixel distance from the bottom of the page while scrolling)
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var box = $("#scrollbox");
//Just append some content here
box.html(box.html() + "<br />fa");
}
});
Fiddle
Just place your ajax code where I extended the content with simple html breaks
Related
I am using the following code to detect when a user scrolls to the bottom of the page:
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// when scroll to bottom of the page
}
});
However, instead of telling me when I scroll to the bottom of the page, the if statement becomes true when I scroll all the way to the top. Why is this happening? Thanks so much. The reason I need to detect when the user scrolls to the bottom is so that I can dynamically load content from a server. I don't think this matter, but I am using Flask on the backend and the malfunctioning page is rendered as a template with jinja-2.
_onScrollHandler(event){
if(event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight){
console.log('Reacehd Bottom')
}
}
Call this function when onscroll event occurs and from event arg you can get the scrollHeight scrollTop and clientheight.
Please try with this one
I encountered a challenge when trying to activate autoload on scrolling to the bottom. The problem is that the jQuery doesn't work when I scroll to the bottom but when I scroll back to the top, it works.
I tried testing on 1.8.3 instead of the 1.11.1 I was using, the two are actually compressed.
I'm new to jQuery and would appreciate anyone who can assist me. I however tried testing the autoload on another computer and it works fine.
Below is the code
function auto_loader(){
$(window).scroll(function()
{
if($(window).scrollTop() + $(window).height() == $(document).height())
{
// load your content
alert("\ola");
}
});
}
I have always done this:
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// Bottom of page
}
Fiddle: http://jsfiddle.net/tq0kxkhs/
I'm working on ajax infinite scroll. I have below code to make ajax request after scrolling at end,
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height())){
loadlist();
}
});
But it fires when scrolled at end (including footer.). But I want it fired when the footer is just starting to show while scrolling (footer height is 300px).
I researched and tried following code,
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 300){ // 300px footer height
loadlist();
}
});
But It seems dirty. the function gets fired too many times when scrolling. any good solutions ?
I'd take the approach of triggering the behaviour when your footer element first scrolls into view.
var $footer = $("#my-footer");
$(window).scroll( function() {
if (isScrolledIntoView($footer) ) loadList();
});
See Check if element is visible after scrolling to get the code for isScrolledIntoView().
I wanted to do an endless scrolling for my web application. In order to do action while reaching bottom side of page I tried this code:
var count = 2;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("REached page down");
search(false, count);
count++;
}
});
But unfortunately this is being called when I scroll to topmost side of page. I tried to return scroll position as a onclick event to the bottom most div of my page which returned :
$(window).scrollTop() as 1614
$(document).height() as 2250
$(window).height() as 2250.
Any other ways to achieve it?
You can check for page bottom with this code.
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 500) {
// fun stuff goes here
}
500 is the offset value from the bottom, as you might want to trigger your code a bit earlier to prepare content.
For example, hipster.cc uses the same code for endless scrolling.
I need to calculate the end of scrolling on web page so that i can make an Ajax call.
I have searched posts in stackoverflow, but the solutions didn't worked for me.
I am using the below code ion order to determine that:
$(window).scrollTop() == $(document).height() - $(window).height()
but the above condition fails and am not able to get to know when page scroll ends.
As the values don't match on L.H.S and R.H.S the condition fails.
Just in order to check i used:
$(window).scrollTop() == $(document).height() - $(window).height() - 13
which works for chrome and firefox but fails for IE.
I need a concrete solution and don't want to hard code values.
Please help me in getting it right.
EDIT: To be specific, i am trying to calculate the end of vertical scroll bar.
Here is what I would do:
$(window).on('scroll', function() {
if($(window).scrollTop() != 0)
{
if( $(window).height() + $(window).scrollTop() >= $(document).height() )
{
//YES, I AM EXACTLY AT THE END OF THE SCROLL, PLZ FIRE AJAX NOW
}
}
});
CAUTION: Be very careful about having negative top margins though for styles in any of your elements on the page!! it may offset the calculation!
to calculate the end of scroll, try scrollHeight property.
This should retrieve the page height for you (not using jQuery but javascript instead):
var height = document.body.clientHeight;
You will find that this is the best cross-browser solution to your problem.
Here's how you do it. You take the scrolled distance and add the window height, then check if they equal the document height :
$(window).on('scroll', function() {
if (($(this).scrollTop() + $(this).height()) - $(document).outerHeight(true) >= 0) {
alert('Scrolled to bottom');
}
});
FIDDLE
This works for me in all five browsers!