Develop Reference

Stop scrolling down after scrolling to top

My problem is, that after fast scrolling down with the touchpad, the window is correctly jumping to the top after 300px, but after that, the browser is stil scrolling down.
Here is a example of my problem
https://codepen.io/anon/pen/XoMExW
I´ve tried this, but it didn´t work
How to disable scrolling temporarily?
$(window).scroll(function(){
if( $(window).scrollTop() >= 300 ){
$(window).scrollTop(0);
}
});

What you could do is after each scroll event, add a setTimeout. For every scroll event, you will first clear the one you created in the previous event and recreate a new one right after. This will keep running until you reach the last scroll event, then during this last scroll event, the callback of the setTimeout will be triggered and it will run your code:
var isScrolling;
$(window).scroll(function() {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
if ($(window).scrollTop() >= 300) {
$(window).scrollTop(0);
}
}, 100);
});

jQuery .stop() on scroll is blocking animation

this is my simple scroll function.
When user scrolls a certain distance from the bottom of the page, a registration box appears via animation:
$(window).scroll(function(){
if($docHeight - $top < 500 && document.cookie.indexOf("flag") < 0) {
$('.register').stop().animate({
'bottom': -1,
});
return false;
}
});
My problem is that the .stop() function before .animate() triggers every time the user scrolls; and so during animation it is constantly stopping as the user scrolls causing a 'juddering' effect (of course, no juddering if the user doesn't scroll).
I have thought about setting flags during animation and not running the animation to avoid this, but I can't figure it out.
I believe the function .once() could be used well here?
Thanks

JS: preventDefault for User Scrolling? Or force GSAP scrolling over user?

I'm working on a slideshow area. I want to make it so scrolling horizontally will trigger an animation which moves the scrollable area to the next "slide."
Everything is working, but only if I scroll just a tiny bit. If I scroll more, the GSAP scrolling animation fails silently.
There are two ways that would make sense for this to be solved which I can think of:
1 > The first would be cancelling the scroll behavior, something like this:
$viewing_area.scroll( function(event) {
if(animationIsInProgress) {
event.preventDefault();
}
}
But this way is likely to stop GSAP scrolling as well. There is no way to distinguish if the scrolling is due to GSAP or the user that I know of.
2 > The second way would be to have GSAP force it's scrolling over anything the user is doing:
TweenLite.to($viewing_area, time, {
scrollTo: { x: slide_stops[nextTarget] },
ease: Power4.easeInOut,
onComplete: function() {
console.log('scrolling completed');
animationIsInProgress = false;
}
//Some option for forcing the behavior over user scrolling
});
Are either of these things achievable, or is scrolling by it's nature, unstoppable?

It ends up, GSAP scroll to plugin has a setting for this:
http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/
It is called autokill, and if it is set to false, user scrolling will not interrupt the tween.
TweenLite.to(myDiv, 2, {scrollTo:{y:400, autoKill:false}, ease:Power2.easeOut});

With javascript / query, is there a way to just "nudge" or "flick" the scroll so it's interruptible by the user (better description within)

I want some js to automatically scroll just a slight bit down the page, however I also want this scroll to be interruptible by the user.
When using jquery to auto scroll, when you animate the scroll with .animate and then the user starts scrolling while the animation scroll is still going they interact with each other and create a strange jumping effect.
Is there a way to make so when the user scroll during a javascript scroll it just stop the javascript scroll?

It can't be done since you can't know if the end-user scrolled or you scrolled the page via javascript.
A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.
Docs
What I tried to do but failed because the above:
// callback for the scroll event
$(document.body).scroll(function(){
// Stop the scrolling!
$('html, body').stop();
});
A not working demo...

The other users answer is actually incorrect, it is possible and has been answered before:
How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
Check the answer
"$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
$("html,body").stop();
}
})"
I've updated the previous users JS Fiddle to work with the proposed solution and it works perfectly.
http://jsfiddle.net/Lwvba/7/

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 :)