to calculate this, here's what I use. Lets say we have an element that is 200px tall and has 1000px of content; $(el)[0].scrollHeight
is the amount of scrollable content, $(element)[0].scrollTop
is how much of the scrollable content has been scrolled and is above the element's "viewport".
How much it can be scrolled:
var scrollablePixels = $(element)[0].scrollHeight - $(element).scrollTop(); // 1000px
if it has been fully scrolled, the following will return true:
var hasScrolledToBottom = $(element)[0].scrollHeight - $(element).scrollTop() === $(element).height(); // false -- hasn't been scrolled yet
set the amount scrolled:
var pixelsToScrollElement = $(element).scrollTop(800);
now let's run the hasScrolledToBottom
test again
$(element)[0].scrollHeight - $(element).scrollTop() === $(element).height(); // true
edit
An answer to another post will help: IN VIEWPORT?
basically you can use a combination of what I've listed and what's posted there to make your calculations
edit 3
window.onmousewheel = document.onmousewheel = customScroll;
function customScroll(e) {
var scrollTime = 1200,
scrollDistance = 200,
wheelChange = e.wheelDelta ? e.wheelDelta / 120
: e.detail ? -e.detail / 3
: 0,
scrollTop = $(window).scrollTop() - scrollDistance * wheelChange;
$('html, body').stop().animate({
scrollTop: scrollTop
}, scrollTime);
e.preventDefault();
e.returnValue = false;
}
$(window).on('DOMMouseScroll', function(e) {
customScroll(e);
});