Develop Reference

detect (event) attempting to scroll up/down when already at top/bottom of the page with javascript or angularJS,

so i want to detect scrolling to the top(or bottom) when i'm already at the top(or bottom) of the page. I've seen a couple questions with similar problems here, but the only answer was to detect mousewheel event.
but considering the fact that i want to detect it when it's triggered by any similar action (like pressing the up/down key, or mousewheel and touchpad scrolling, or pageUp/Down, or home/end ...) should I create eventlisteners for each and every one of them? does anyone know a better way of doing it??

This is what I have for you so far. I can detect when you hit the top or bottom regardless of how you scrolled. The issue is detecting when you are trying to keep scrolling after you reached it because the scroll event does not fire unless you actually scroll. The only thing I can think of is to programmatically scroll the screen up slightly so that you can scroll again, but I don't recommend doing that. Other than this I don't see any other way other than creating custom events for each possible way the user can scroll.
$(function(){
var lastScrollBarPos = 0;
$(window).scroll(function(event){
var browserViewportHeight = $(window).height();
var hmtlDocHeight = $(document).height();
var scrollBarPos = $(window).scrollTop();
if (scrollBarPos > lastScrollBarPos){
// downscroll code
console.log('scroll down');
if(hmtlDocHeight == browserViewportHeight + scrollBarPos){
console.log('reached bottom');
}
} else {
// upscroll code
console.log('scroll up');
if(scrollBarPos == 0){
//we are at the top and someone is scrolling
console.log('reached top');
}
}
lastScrollBarPos = scrollBarPos;
});
});

How to make this scrollTop function mobile-friendly

I have made a function wich runs on the computer very well. But on mobiles the position refreshes only when the scrolling stops. Its a known problem and i found answers but I didnt get it in my function working. Maybe one of you can help me.
my function:
$(window).scroll(function () {
if ($(window).scrollTop() >600) {
$('#logo').css('position', "fixed");
$('#logo').css('top', 0);
}
else if($(window).scrollTop() < 600) {
$('#logo').css('position', "relative");
$('#logo').css('top', 600)
}
});
and in the internet i found this which i should replace in my function:
$('body').on({
'touchmove': function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
}
});
or this:
$('body').bind('touchmove', function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
});
It would be nice if someone could rewrite my function so that it works smoothly in mobiles.
Edit
I explain shortly what this function do. When you load my page there is a blackscreen with a headline. Nothing else. when you scroll up the title should move up normaly until he reaches the top. when it reaches the top it gets the "position: fixed" attribute. when you scroll down it gets the "position: relative" attribute again. Nothing else should happen.
But on mobiles the text scrolls up until the scrolling stops (most of the time you scroll the text out of the screen) and pop up on the fixed position. But when it fixed everything is ok and it stands there.

The problem might be in the fixed position rather than in the scrollTop. Fixed positioned elements are not very mobile friendly.
Its behavior depends on the mobile device and OS.
More info: http://bradfrostweb.com/blog/mobile/fixed-position/

Disable all scrolling on webpage

I would like to know if it is possible to disable all scrolling on a webpage.
I am currently using
html, body { overflow:hidden; }
The issue is that this does not work on iOS devices and if you hold in the mouse wheel and drag it down you can also scroll, so it seems like a very poor solution to the problem
Is there a way to disable all methods of scrolling on all devices and then re-enable it?

I have had this exact same issue, i fixed it with the following;
var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
disableScroll = true;
scrollPos = $(window).scrollTop();
}
function enableScroll() {
disableScroll = false;
}
$(function(){
$(window).bind('scroll', function(){
if(disableScroll) $(window).scrollTop(scrollPos);
});
$(window).bind('touchmove', function(){
$(window).trigger('scroll');
});
});
the touch move is bound to the window as the window scroll event is not fired until touch move is completed, so this allows a much smoother experience on iOS!
This isn't a perfect solution as you can 'throw' the page, but it will return to desired position when the throw has complete (as the window scroll event will then be fired). This is because iOS browsers strip out a lot of events for performance. also setTimeout and setInterval functions do not fire whilst the page is being thrown, having a loop isn't an option either!
see here http://jsfiddle.net/8T26k/

javascript infinite scrolling forward

I am working on an infinite implementation. At the moment, I am able to scroll down and the code does what it is supposed to do with this check:
if ($(window).scrollTop() > $(document).height() - $(window).height() - 300) {
//do stuff
}
I also need to do stuff when I go forward. The problem I have is that when the page first loads, the scroll bar is at the top of the page, is there an event or a way of knowing the user is scrolling up when the page first loads?
At the moment, the user has to scroll down and then up to trigger the event.

I had the same problem and i used
window.onload = loadSubPage;
Hope it's what you are looking for :)

Event at the end of the document

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.