CODEWITHSUNDEEP
javascriptjqueryscrollmousewheel
Enthusiast
Enthusiast

Reputation: 172

Mousewheel doesnt work in firefox

I have been trying to figure out why my smoothscroll function doesn't work in firefox? It works fine in other browsers like chrome, Microsoft Edge. Can someone help me out, please. Please check this pen: 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
        });

    });
}

Upvotes: 0

Views: 683

Answers (1)

Philip
Philip

Reputation: 3536

The scroll behavior in firefox is a little bit weird to me.

Here is a discussion i've found 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);

Upvotes: 1

Related Questions