We Keep Coding

FullPage scrollOverflow section scrolled with iScroll scrollTo() bug

I'm using FullPage with scrollOverflow: true and I need to scroll to a certain position in a scrollable section. FullPage uses forked version of iScroll plugin for those overflow sections.
So what I'm doing is:
fire FullPage scroll to section
find instance of iScroll in that section and fire it's scrollTo() event
reBuild() FullPage
The scroll positions of both plugins change correctly, but the problem seems to be that FullPage doesn't register iScroll's scrollTo() event and behaves like the active section is scrolled to the top, so basically scrolling up gets you to previous section and scrolling down gets you under the content eventually.
document.querySelector('.button').addEventListener('click', e => {
fullpage_api.moveTo(3)
fullpage_api.getActiveSection().item.querySelector('.fp-scrollable').scrollTo(0, 1000, 1000)
fullpage_api.reBuild()
})
Here is a simplified version of my code with the bug reproduced: https://jsfiddle.net/5bojtrmd/13/
after clicking the button, you can't get to the section 3 title anymore and you can scroll to red zone which shouldn't be seen

Few things:
You need to use a negative value for the iscroll scrollTo y position.
You won't have to call the refresh function of fullPage.js but the one from iScroll.
Code here:
document.querySelector('.button').addEventListener('click', e => {
fullpage_api.moveTo(3)
var instance = fullpage_api.getActiveSection().item.querySelector('.fp-scrollable').fp_iscrollInstance;
instance.scrollTo(0, -1050, 1000);
setTimeout(function () {
instance.refresh();
}, 1000 + 150);
});
Reproduction online.

Javascript focusing a large div with fixed header

I'm using a tiny library called '$.scrollTo' to animate a scroll to a div element in my html. at the top of my page I have a fixed navgation bar.
at the end of the animation, I would like to have that div focused (for accessibility). if my div is to large, at the end of the animation, the fact that it gets focus - simply sends it a bit off the screen.
This does not happen with small divs.
here is my code (check jsfiddle below):
$('#buttonid').on("click", function() {
//fixed nav bar height (to compensate when scrolling)
var fixed_navbar_height = $("#navbar-id").height();
//the element to scroll to
var $go_to_selector = $("#topic2");
$.scrollTo($go_to_selector, {
duration: 1000,
offset: -fixed_navbar_height,
onAfter: function() {
//if you comment out this .focus it works as intended.
$go_to_selector.focus();
}
});
});
here is a JSFIDDLE example:
https://jsfiddle.net/dy35obpq/3/
obviously the onAfter messes it up, but i would like both the animation and the focus. Any ideas on how to implement a focus on a large div without letting it change the scroll bar ? suggestions are more than welcome.

Try this.
onAfter: function() {
$go_to_selector.focus();
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
}
I have simply added this line in your onAfter callback.
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
and it seems to have fixed the problem while still retaining focus. You might want to use css to disable the focus blue highlight.

Parallax Scrolling with JQuery animation stumbles

I have implemented a parallax effect with a video. I wanted to do it for my own so I did it without any framework or plugin but it is slow and it stumbles around.
My idea was that there are 2 pictures, 1 video and 2 boxes in front of them. So my code was that if i am on the position of the 1 picture, the pictures scroll slower (with margin-top) like this:
$( window ).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll>470){
scroll = scroll-470;
var scrollSlow = scroll*0.4;
$('#Picture1').css('margin-top', scrollSlow);
$('#InfoBox1').css('margin-top', -scroll);
if(scroll<400){
$('#Picture2').css('margin-top', -scroll);
}
$('#InfoBox2').css('margin-top', -scroll+heightPX);
if(scroll<900){
$('#Picture3').css('margin-top', -scroll+heightPX);
}
}
}
But if I scroll down it doesn't work.
Here is the online version: http://p-goetz.de/Parallax.html

Problem: You are probably testing your website in chrome/safari, try using Firefox you will notice that the things are smoother.
Reason: In some browsers when you scroll they jump 100px at once hence your parallax animation start looking odd.
Solution: Try to use a custom scroll with smooth fx.I will recommend Nicescroll.

The issue is the images/videos are so large, the browser lags when scrolling before they are completely loaded. One solution would be to wait for the images/videos to finish loading before presenting the page.
$('body').hide();
var video = document.getElementById('PARALLAX_bild2');
video.addEventListener('loadeddata', function() { // video is loaded
$('img').load(function() { // images are loaded
// Do some fancy fade in of the page here. This is just an example.
$('body').show();
});
}, false);

Responsive setting creates page scrolling issues

I'm having issues with my CarouFredSel carousel.
I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...
The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.
On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.
carouFredSel is initiated like so :
$("#modeles").carouFredSel({
responsive: true,
scroll: {
fx: "crossfade",
duration: 500
},
direction: "left",
items: {
visible: 1,
width: 868
},
auto: false
}, {
transition: true
});
I have created a JS fiddle reproducing the issue here.

Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.
In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.
What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.
That said, we have this:
$(window).scroll(function () {
$("body").attr("xheight",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("xheight"))
});
And that's all you need.
Given example:
jsFiddle

animate() not updating fast enough

I'm making a navigation bar that remains at the top of the page. When the user scrolls down, this bar will shrink, and when the user goes back to the top of the page, the navbar returns to its original dimensions.
Problem: When the user scroll down, the navbar shrinks as expected. However if the user scrolls back to the top of the page quickly, the navbar remains shrunken, and the animate() function within the scrollTop() callback function triggers after a few seconds.
To debug this, I included console.log($(window).scrollTop()); to tell me the current position of the user on the page. I get the console.log output as quick as the user scrolls. But {console.log('animated'); which is supposed to fire when the animation is completed, does not appear till a few seconds later after console.log($(window).scrollTop()); outputs 0.
How can I get animate() to respond quickly when the user scrolls up?
JS Code
var navBar = $('#navbar-inner');
var top = navBar.css('top');
$(window).scroll(function() {
console.log($(window).scrollTop());
if($(this).scrollTop() > 50) {
navBar.animate({'marginTop':'-20', 'height':'60'}, 300);
} else {
navBar.animate({'marginTop':'0', 'height':'80'}, 300, function()
{console.log('animated');});
}
});

(Posting my comment as an answer)
Use .stop() to stop any ongoing animations before starting a new one.

I experienced this kind of issues before with animations that last longer than the user action. You just need to stop the animation, something like
navBar.stop(true, true).animate(...);
To understand stop() better here is the link http://api.jquery.com/stop/. Hope it helps