Event at the end of the document - javascript

I don't understand why this doesn't work. Explanation will be appreciated.
var scrollTop = $(window).scrollTop();
var height = $(window).height();
if (scrollTop === height ) {
alert("end!");
}
http://jsfiddle.net/Zasxe/

$(window).height() gives you the size of the user's viewport, not the size of the total document, which is what you most likely want. To find if the user has reached the end of the document, you've got to find the document's size, by $(document).height().
Furthermore, to find if a user's reached the end of the document, using jQuery, you need to capture the scroll event, and see if the user's reached the bottom:
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
alert("end!");
}
});

There's no event handler. That code only gets run once, when the page loads.
$(document).scroll(function () {
// Your code here
});
Be aware that the code will run every time you scroll, so don't make it to heavy.
And as someone else said, there were a number of other things wrong with the code - but start with putting the handler in.

Related

Cannot Detect When User Scrolls to the Bottom of Page

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

Check scrollpoint each pixel is scrolled

I need your help again. A try to code something like this:
I got an imaginary point on screen in pixel (lets say half of body) and I got a element in body. I want to alert if the elements TOP hits the imaginary line and alert if the elements bottom leave imaginary line.
I got something to work (for hit the line) but it only works a few times, but if I scroll fast it doesn't work. If I scroll very very slow and exactly the alert appears:
$(window).scroll(function () {
// A POINT I SET On SCREEN --> IN THIS CASE HALF SIZE OF BODY
var halfBody = $("body").height() / 2;
if ($(window).scrollTop() == halfBody) alert('HIER');
});
I think the problem is the exact pixels i try to match. I think with scrolling I haven't always the exact pixels.
How can this be done so that elements top cross the line alert('element top hits the line') and elements bottom leave the line alert('no element leaving the line'); ?
I hope you understand :)
Scroll events are trigger happy and handing each even can overwhelm your handler.
Try using lodash/underscore debnounce/threshould to handle them every X milliseconds.
It's a common practice to scroll handling in browsers.
Ok i found a nice solution with caching variables and a set timeout:
var timer;
var windowHeight = $(window).height();
var triggerHeight = 0.5 * windowHeight;
$(window).scroll(function() {
if(timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(function() {
// this variable changes between callbacks, so we can't cache it
var y = $(window).scrollTop() ;
if(y > triggerHeight) {
}
if( $(window).scrollTop() == 0 ) { // IF HITS TOP OF PAGE
}
}, 10);
});
maybe it helps someone!

Perform action when object is visible in viewport

I have a div on my page, and I would like the background color to change when the viewer scrolls down to it.
How can I do this?
I would have used CSS3 with something like this...
var elemTop = $('div').offset().top;
$(window).scroll(function() {
if($(this).scrollTop() == elemTop) {
$('div').removeClass('hidden');
}
});
The commenter above is right. You should try something first and when you get stuck, the community will help you get unstuck. That said, here's a quick jquery to solve your problem.
$(document).ready(function(){
var offsetTop = $('#test').offset().top, //offset from top of element - element has id of 'test'
finalOffset = offsetTop - document.documentElement.clientHeight; //screen size
$(window).on('scroll',function(){
var whereAmI = $(document).scrollTop();
if(whereAmI >= offsetTop){
console.log("i've arrived at the destination");
}
})
})
Note that the above code executes the console.log() at every point past your requirement (meaning from there downwards). In case you want the execution to happen only one, you need to adapt the code a bit. One more note - if you're checking this in a fiddle, this document.documentElement.clientHeight needs to be adapted to work in an iframe. So test it on your local machine.

trigger event on reaching browser bottom

$(window).scroll(function(){
if(window.reachBrowserBottom) {
alert('browser bottom reached');
}
}
I want to trigger an event when browser scrolling reaches the bottom. To load more content, much like sites like Facebook or Quora do it.
I tried:-
var bottomReached = $(window).height() = $(window).scrollTop();
if(bottomReached) {
...
}
But bottomReached is a bit unpredictable.
Check out this answer. It addresses the same issue.
https://stackoverflow.com/a/3898152/1341823
You need to use the .scroll() event on window.

Calculating end of scroll on a web page

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!

Categories

Resources