Jquery get how much is scrolled

Note that you may want debounce the event depending on what you are doing. You didn't provide very much context in your question, but if you give a better example of what you are actually using this info for we can provide a better answer.

Please show more of your code, and how you are using the "scroll value". To detemine how many pixels were scrolled you have to keep in mind that the scroll event gets fired almost every pixel that you move. The way to accomplish it is to save the previous scrolled value and compare that in a timeout. Like this:. This way you will get the amount of scrolled a second after scrolling this is adjustable but you have to keep in mind that the smooth scrolling that is so prevalent today has some run-out time and you dont want to trigger before a full stop.

The other way to do this? Yes, possible, with jQuery Mobile I do not appreciate this solution, because it is necessary to include heavy jQuery mobile.

To reduce the used processing power by adding a timer to a Jquery scroll method is probably not a great idea. The visual effect is indeed quite bad. The whole web browsing experience could be made much better by hiding the scrolling element just when the scroll begins and making it slide in at the right position some time after. As I found out, this can cause the window and document to report the same value, which breaks this script.

This happens specifically in Chrome. Instead, use window. Necessary check should be:. I also had the same problem with you. On mobile don't work. Can anyone help me? I tried a lot suggestions and no one worked.. I'm implementing an endless scrolling function. Skip to content. Sign in Sign up. Instantly share code, notes, and snippets. Last active Sep 23, Code Revisions 4 Stars Forks Embed What would you like to do? Embed Embed this gist in your website.

Share Copy sharable link for this gist. Learn more about clone URLs. Download ZIP. Cache the winheight , docheight , and trackLength variables' values, and only refresh them when the page has resized, instead of each time the page is scrolled. Throttle the code inside window onscroll so they are executed only once per a certain period ie: milliseconds , using JavaScript's setTimeout method.

Detecting how much the user has scrolled forms the basis for many interesting effects, such as parallax or opt-in boxes that only pop up when you've reached the bottom of the page.

We now have the essential parts to implement these effects ourselves. Copyright c JavaScript Kit. Determining how much the user has scrolled the page using JavaScript or jQuery Created: Jan 22nd, One of the projects I recently worked on required me to not just detect how much the user has scrolled the page in terms of an absolute value ie: pixels , but also, as a percentage of the total scrollable length of the document.

Detecting the number of pixels the user has scrolled To detect how much the user has scrolled the page vertically in terms of pixels from the very top, in JavaScript, we would probe either window.

On a page with no scrollbars for example, that length is 0, while for longer pages, that length is basically represented by the white part inside the browser scrollbar UI: So first thing's first before. To get the total scrollable area of a document, we need to retrieve the following two measurements of the page: The height of the browser window The height of the entire document By subtracting 1 from 2, we get the total scrollable area of the document.

Looking at our code for getting how many percent of the page the user has scrolled above, here's a couple of optimizations we can perform: Cache the winheight , docheight , and trackLength variables' values, and only refresh them when the page has resized, instead of each time the page is scrolled.