Question

我已经快速滚动脚本，仍然可以让用户自由滚动，但可以帮助他们在全高画面中精确捕捉..

问题是禁用滚动功能在Safari＆amp; Firefox浏览器。在Chrome中，它非常完美。

我已经尝试了几天才找到解决方案。我尝试使用几个滚动插件，但我最终得到了相同的结果。最后，我决定删除我网站上的所有外部功能，并在小提琴中重建脚本，向您展示我正在处理的内容。

有趣的是滚动小提琴恰好在Safari中运行良好，但是当我将这段代码放在普通的.html文件中时，滚动问题又回来了：

我的演示：

小提琴：Fiddle
.html文件：link

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

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

0 个答案: