Don E Posted September 22, 2013 Share Posted September 22, 2013 (edited) Hey everyone, I'm experimenting with something and was wondering if anyone can guide me in the right direction. Lets say I want to know how much a user has scroll down a page about 200 pixels for example and let the user know they done that or, as many of you know today on certain websites like facebook etc, have it where the user scrolls down a certain amount on their newsfeed page and new content is automatically loaded at the bottom. This fancy way of doing that takes away the need to have pagination links. So for simplicity, I'm experimenting with the following code where the console.log should alert when the user has scroll down 200 pixels but the problem is, the scroll amount is not incremented by one sometimes but instead three or four, etc etc, depending on how fast you scroll. <!doctype html><html><head><meta charset="UTF-8"><title>Scroll Check</title><script type="text/javascript">window.onscroll = function(){ var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; //console.log(scrollTop); // uncomment this to see the scrollTop value and you'll see how it increments. if(scrollTop == 200) { console.log(scrollTop); }}</script><style type="text/css"> #content { width: 500px; height: 2000px; background-color: lightblue;}</style></head><body><div id="content"> sdfg sdfg sd fg sdf </div></body></html> So my question is, how can we make sure that scrollTop value will contain 200(because as mentioned above, scrollTop will contain values like 192, 195, 196, 198, 201, etc; depends how fast you scroll I believe) when it reaches 200 when scrolling thus executing the if statement and console.log the value 200? Thanks. Edited September 22, 2013 by Don E Link to comment Share on other sites More sharing options...
Ingolme Posted September 22, 2013 Share Posted September 22, 2013 First of all: http://w3schools.invisionzone.com/index.php?showtopic=48287 As for the solution to your problem, there are many ways. One is to simply check if the scroll amount is greater than 200 rather than strictly equal. Another solution is to store the last value in a variable and if the current one is greater than 200 check that the last one was less than or equal to 200. Link to comment Share on other sites More sharing options...
Don E Posted September 22, 2013 Author Share Posted September 22, 2013 (edited) Fox, just because I agreed on the not liking the auto-loading-never-ending scroll doesn't mean I shouldn't learn how to implement it incase I ever have to or asked to. Thanks for the tip. Edited September 22, 2013 by Don E Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now