鼠标滚轮在Firefox

时间:2017-05-18 06:57:10

标签: javascript jquery scroll mousewheel

我一直想弄清楚为什么我的smoothscroll功能在firefox中不起作用?它在Chrome,Microsoft Edge等其他浏览器中运行良好。请有人帮帮我。请检查此笔:https://codepen.io/anon/pen/oWPaNx

function smoothScroll(time, distance) {
    var $window = $(window);
    var scrollTime = time;
    var scrollDistance = distance;

    $window.on("wheel mousewheel DOMMouseScroll", function (event) {

        event.preventDefault();
        var delta = event.originalEvent.wheelDelta / 80 || -event.originalEvent.detail / 3;

        var scrollTop = $window.scrollTop();
        var finalScroll = scrollTop - parseInt(delta * scrollDistance);

        TweenMax.to($window, scrollTime, {
            scrollTo: {
                y: finalScroll,
                autoKill: true
            },
            ease: Power4.easeOut,
            overwrite: 5
        });

    });
}

1 个答案:

答案 0 :(得分:1)

firefox中的滚动行为对我来说有点奇怪。

以下是我发现mousewheel event is not triggering in firefox browser

的讨论
function smoothScroll(time, distance) {

  // added this
  var isFirefox = (/Firefox/i.test(navigator.userAgent));
  var scrollEvent = isFirefox ? "DOMMouseScroll" : "mousewheel"

  var $window = $(window);
  var scrollTime = time;
  var scrollDistance = distance;

  // insert scrollEvent var
  $window.on(scrollEvent, function(event) {

    // added this (check if firefox)
    if (!isFirefox) {
      event.preventDefault();
    }

    var delta = event.originalEvent.wheelDelta / 80 || -event.originalEvent.detail / 3;

    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta * scrollDistance);

    // changed window
    TweenMax.to(window, scrollTime, {
      scrollTo: {
        y: finalScroll,
        autoKill: true
      },
      ease: Power4.easeOut,
      overwrite: 5
    });

  });
}

smoothScroll(1.1, 110);