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().
Related
My problem is, that after fast scrolling down with the touchpad, the window is correctly jumping to the top after 300px, but after that, the browser is stil scrolling down.
Here is a example of my problem
https://codepen.io/anon/pen/XoMExW
I´ve tried this, but it didn´t work
How to disable scrolling temporarily?
$(window).scroll(function(){
if( $(window).scrollTop() >= 300 ){
$(window).scrollTop(0);
}
});
What you could do is after each scroll event, add a setTimeout. For every scroll event, you will first clear the one you created in the previous event and recreate a new one right after. This will keep running until you reach the last scroll event, then during this last scroll event, the callback of the setTimeout will be triggered and it will run your code:
var isScrolling;
$(window).scroll(function() {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
if ($(window).scrollTop() >= 300) {
$(window).scrollTop(0);
}
}, 100);
});
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 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'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
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!