Javascript 在Safari中设置动画无法正常工作时禁用滚动

我制作了一个快照到滚动脚本，它仍然可以让用户自由滚动，但可以帮助他们在全高屏幕上精确地捕捉

问题是禁用滚动功能在Safari和Firefox中无法正常工作。在铬合金中，它工作得非常完美

我花了好几天的时间试图找到一个解决办法。我尝试使用几个scroll插件，但最终得到了相同的结果。最后，我决定删除我网站上的所有外部功能，重新构建脚本，向大家展示我正在处理的事情

有趣的是，滚动小提琴恰好在Safari中工作得很好，但当我将此代码放在一个普通的.html文件中时，滚动问题又回来了：

我的演示：

• 小提琴：
• .html文件：

鉴于Fiddle中的代码与.html代码相同，我的第一个假设是Fiddle可以工作，因为它是在iFrame中呈现的。在Safari中，直接身体上的动画无法正常工作

非常感谢能帮我的人

  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;
      }
    }
  }