Develop Reference

wait until scroll is done then execute

Hello I found a code that switches the content of your body when you click a button from this codepen and I would like to add a feature that it waits with switching the content until the page is done scrolling for cross browser support I use this script for my smooth scroll:
// add event listener on load
window.addEventListener('load', function() {
// scroll into view
var btns = document.querySelectorAll('.scrollwrap');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.wrapper').scrollIntoView({
behavior: 'smooth'
});
document.getElementById("wrap").scrollTop -= 100;
});
}
I got this script from here.
How can I make it wait until the page is fully scrolled to the set destination?

I think you can try to catch Event
const wrap = document.getElementById("wrap");
wrap.addEventListener('scroll', function(e) {
const lastKnownScrollPosition = wrap.scrollTop;
Here you can do what you want to do =)
});

While the page scrolls, if the page has any loading icon or anything indicating new contents loading, you need to get the selector of that icon or whatever.
Then do something like this.
var checkExist = setInterval(function() {
if ($('#loadingIcon').length) {
console.log("Exists!");
clearInterval(checkExist);
}
}, 100); // check every 100ms
Refer to this for more information.
To get selector to your loading icon, you will have to pause the dom by pressing F8 and then inspecting the loading icon. Pausing the dom will prevent the icon from disappearing.

Stopping a scrollhandler from running after someone clicks an element

Ok so when someone scrolls to the video it starts and when someone scrolls away from the video it stops using load restarting the video and showing the poster.
The problem I have is that I don't want this function to run when someone clicks to pause the video. It would be pretty annoying for the scroll handler to take control.
jQuery(window).load(function(){
jQuery(window).scroll(function(){
playvideo();
});
});
var playvideo = function(){
var scrollTop = jQuery(window).scrollTop()+jQuery(window).height();
var elem='.video';
var video = document.getElementById('video-background');
var elheight = jQuery(elem).height();
if(scrollTop >= jQuery(elem).offset().top+elheight){
//fade out the video play button and start the video
$j('.video-caption-wrapper').fadeOut("Fast",function() {video.play();});
}else{
// fade in the play button and reload the video
$j('.video-caption-wrapper').fadeIn("Fast",function() {video.load()});
}
}
$j('#video-background').click(function(event) {
//when the video is clicked pause it and unbind scrolling
if (this.paused == false) {
this.pause();
$j(window).off("scroll",playvideo);
} else {
this.play();
}
});

This:
jQuery(window).load(function(){
jQuery(window).scroll(function(){
playvideo();
});
});
Should be:
jQuery(window).load(function(){
jQuery(window).scroll(playvideo);
});
That will allow you to refer to the playvideo function when removing the scroll listener. Right now you try to remove playvideo as a listener when you have never added it. You added an anonymous function which calls playvideo.

How to detect end of scrolling

i have some problems with my script. So, i want to detect end of my scrolling action. I have my alert when i'm scrolling but not if i'm ending it. Can you help me? This is my code:
var animatable = $('body, html');
var animating = false;
animatable.animate( {scrollTop: $('#foo').offset()})
$(window).scroll(function(e) {
if(!animating){
animatable.stop(false, true);
alert('stop scrolling');
}
animating = false;
});​
and some fiddle: http://jsfiddle.net/yhnKR/

is this what you're trying to achieve:
$('body').animate( {scrollTop: $('#foo').offset().top},1000,function(){
alert('stop scrolling');
});
http://jsfiddle.net/yhnKR/2/
You don't have to watch the scroll event if you animate the scroll with jquery.
Ok, if you want to detect when the user stopped scrolling, you'll have to use a timeout to check if the user stopped. Otherwise you'll get the event for each scroll step.
Like this:
var delay = 1000;
var timeout = null;
$(window).bind('scroll',function(){
clearTimeout(timeout);
timeout = setTimeout(function(){
alert('scrolling stopped');
},delay);
});​​​​​​​​​​
http://jsfiddle.net/yhnKR/4/

maybe adding new events like this:
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
would help

Javascript: is it possible to return false on an anchor element but still update the url without any jerky movement?

In the code below when the anchor element is clicked I am trying to update the url with the anchor's 'href' and scroll down to the relevant 'id':
jQuery(document).ready(function($) {
(function() {
function update_url(id, url, scroll) {
this.id = id;
this.url = url;
this.scroll = scroll;
this.update();
}
update_url.prototype.update = function() {
var url = this.url;
$(this.id).click(function() {
var append = $(this).attr('href');
testing.scrollTo();
document.location.href = url + append;
return false;
});
}
update_url.prototype.scrollTo = function() {
$('html,body').animate({
scrollTop: $("#" + this.scroll).offset().top
},'slow');
}
var testing = new update_url('a', document.URL, 'people');
})(); });
The problem is when you click the anchor the return false; doesn't kick in quick enough so the page jerks for a second before scrolling down.
Is there a way of updating the page's url and still avoiding this jerky movement?

The problem is not that the return false; is triggered too late, but rather that the change you make to document.location.href causes the page reload no matter what.
HTML5 pushState is what you're looking for. If you're using HTML5, that is.
If not, you'll want to resort to hash navigation.
There's also a plugin for that, of course. It supports pushState as well as hash navigation - one less thing for you to worry about.

Run setTimeout only when tab is active

Is there a way to stop setTimeout("myfunction()",10000); from counting up when the page isn't active. For instance,
A user arrives at a "some page" and stays there for 2000ms
User goes to another tab, leaves "some page" open.
myfunction() doesn't fire until they've come back for another 8000ms.

(function() {
var time = 10000,
delta = 100,
tid;
tid = setInterval(function() {
if ( document.hidden ) { return; }
time -= delta;
if ( time <= 0 ) {
clearInterval(tid);
myFunction(); // time passed - do your work
}
}, delta);
})();
Live demo: https://jsbin.com/xaxodaw/quiet
Changelog:
June 9, 2019: I’ve switched to using document.hidden to detect when the page is not visible.

Great answer by Šime Vidas, it helped me with my own coding. For completeness sake I made an example for if you want to use setTimeout instead of setInterval:
(function() {
function myFunction() {
if(window.blurred) {
setTimeout(myFunction, 100);
return;
}
// What you normally want to happen
setTimeout(myFunction, 10000);
};
setTimeout(myFunction, 10000);
window.onblur = function() {window.blurred = true;};
window.onfocus = function() {window.blurred = false;};
})();
You'll see that the window blurred check has a shorter time set than normal, so you can set this depending on how soon you require the rest of the function to be run when the window regains focus.

You can do something like:
$([window, document]).blur(function() {
// Clear timeout here
}).focus(function() {
// start timeout back up here
});
Window is for IE, document is for the rest of the browser world.

I use almost the same approach as Šime Vidas in my slider
but my code is based on document.visibilityState for page visibility checking:
document.addEventListener("visibilitychange", () => {
if ( document.visibilityState === "visible" ) {
slideshow.play();
} else {
slideshow.pause();
}
});
About Page Visibility
API: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

What you'd have to do is set up a mechanism to set timeouts at small intervals, keeping track of total elapsed time. You'd also track "mouseenter" and "mouseleave" on the whole page (the <body> or something). When the short-term timeouts expire, they can check the window state (in or out) and not restart the process when the window is not in focus. The "mouseenter" handler would start all paused timers.
edit — #Šime Vidas has posted an excellent example.

I've finally implemented a variation of #Šime Vidas' answer, because the interval was still running if I opened another program and the browser window was not visible, but the page executing the interval was the active browser tab. So, I've modified the condition to document.hidden || !document.hasFocus(). This way, if the document is hidden or the document doesn't have the focus, the interval function just returns.
(function() {
var time = 10000,
delta = 100,
tid;
tid = setInterval(function() {
if ( document.hidden || !document.hasFocus() ) { return; }
time -= delta;
if ( time <= 0 ) {
clearInterval(tid);
myFunction(); // time passed - do your work
}
}, delta);
})();