Disable scrolling while animating not working properly in Safari

Viewed 59

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;
      }
    }
  }
0 Answers
Related