Menu
usinf javascript is it possible to work out the distance, or how far in pixels a window has been scrolled down?
Regards Phil
619
To make this work, we need to detect scroll events using addEventListener() . var scrollDistance = function (callback) { // Make sure a valid callback was provided if (! callback || typeof callback !== 'function') return; // Variables var isScrolling, start, end, distance; // Listen for scroll events window.
top, distance = (elementOffset - scrollTop); The distance variable now holds the distance from the top of the #my-element element and the top-fold. Note that negative values mean that the element is above the top-fold. Save this answer.
$(document). ready(function(){ var scrollPos = 0; var Counter = 0; $(window). scroll(function(){ var scrollPosCur = $(this). scrollTop(); if (scrollPosCur > scrollPos) { Counter -= 1; } else { Counter += 1; } scrollPos = scrollPosCur; }); });
forward, then scroll offset is the amount the top of the sliver has been scrolled past the top of the viewport. This value is typically used to compute whether this sliver should still protrude into the viewport via SliverGeometry.
This will work to get the distance of an element from the top of the document: document.documentElement.scrollTop
You need to make sure that the element is scrollable.
From Mozilla MDN:
If the element can't be scrolled (e.g. it has no overflow or if the element is non-scrollable), scrollTop is set to 0
183
Catch all browsers including IE
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
From http://www.javascriptkit.com/javatutors/detect-user-scroll-amount.shtml
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
