I've made a snap to scroll script, that still gives users the ability to freely scroll, but helps them a bit to snap precisely in a full height screen..
The problem is that the disable scrolling functionality is not working properly in Safari & Firefox. In Chrome it works perfect.
I've tried literally for days to find a solution. I tried to work with several scroll plugins, but I end up getting the same result. In the end I decided to remove all external functionalities on my site and rebuild the script in a Fiddle to show you guys what I am dealing with.
The funny thing is that the scrolling Fiddle happens to works perfectly in Safari, but when I put this code in a normal .html file the scrolling problems are back:
My demo:
Given the fact the code in the Fiddle is identical to the .html code, my first assumption would be that the Fiddle works because it is rendered in a iFrame. With the idea that the animate on the direct body is not working properly in Safari.
Thank a million, for the person who can help me with this!
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var scrollPos = $(window).scrollTop();
var $window = $(window);
//Easings
jQuery.easing['jswing'] = jQuery.easing['swing'];
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.extend(jQuery.easing, {
easeOutExpo: function(x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
});
var progressPositions = [];
var prevIndex = -1;
var currentIndex = -1;
progressPositions = [];
$('.snapScroll').each(function(index, element) {
progressPositions.push($(element).offset().top + (windowHeight / 2));
});
var animating = false;
$window.on("scroll", function(evt) {
scrollPos = $(window).scrollTop();
currentIndex = -1;
for (index in progressPositions) {
var progressPosition = progressPositions[index];
if ((scrollPos + windowHeight) > progressPosition) {
currentIndex = index;
}
}
if (currentIndex != prevIndex) {
if (currentIndex > prevIndex) {
if (currentIndex > -1) {
disable_scroll();
var nextIndex = parseInt(currentIndex);
var screenId = '#screen-' + nextIndex;
if (animating === false) {
animating = true;
$('html, body').animate({
scrollTop: $(screenId).offset().top
}, 500, 'easeOutExpo').promise().then(function() {
setTimeout(function() {
enable_scroll();
animating = false;
}, 500);
});
}
}
}
}
prevIndex = currentIndex;
});
function disable_scroll() {
document.onmousewheel = function() {
stopWheel();
} /* IE7, IE8 */
if (document.addEventListener) { /* Chrome, Safari, Firefox */
document.addEventListener('DOMMouseScroll', stopWheel, false);
}
}
function enable_scroll() {
document.onmousewheel = null; /* IE7, IE8 */
if (document.addEventListener) { /* Chrome, Safari, Firefox */
document.removeEventListener('DOMMouseScroll', stopWheel, false);
}
}
function stopWheel(e) {
if (!e) {
e = window.event;
} /* IE7, IE8, Chrome, Safari */
if (e.preventDefault) {
e.preventDefault();
} /* Chrome, Safari, Firefox */
e.returnValue = false; /* IE7, IE8 */
}
function wheel(e) {
preventDefault(e);
}
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}