Chosen: Wheel Scrolling is to slow in FireFox in conjunction with jquery-mousewheel plugin

Created on 1 Jun 2017  ·  5Comments  ·  Source: harvesthq/chosen

Is reproduced when using in conjunction with jquery-mousewheel plugin.

See https://jsfiddle.net/4Lba076o/

In Chrome scrolling is OK.
In Firefox it's very slow (1px).

Basically, mouse wheel behavior is not utilizing event.deltaFactor (which is non-standard however).
In Firefox jquery-mousewheel transforms event from {deltaY: -42} to {deltaY: -1, deltaFactor: 42}

Most helpful comment

I had the same issue, but it has nothing to do with mousewheel i think.

I found that Firefox uses a deltaMode of 1, which is scroll per line. So a delta of 3 means 3 lines instead of pixels.

I hacked this into the chosen.jquery.js and it made scrolling a lot faster:

Chosen.prototype.search_results_mousewheel = function(evt) {
     /** Added the factor var and set it's value to 16 when scrolling is line scrolling */
      var delta, factor;
      if (evt.originalEvent) {
        factor = evt.originalEvent.deltaMode === 1 /** DOM_DELTA_LINE */ ? 16 : 1;
        delta = factor * evt.originalEvent.deltaY || -evt.originalEvent.wheelDelta || evt.originalEvent.detail;
      }

      if (delta != null) {
        evt.preventDefault();
        if (evt.type === 'DOMMouseScroll') {
          delta = delta * 40;
        }
        return this.search_results.scrollTop(delta + this.search_results.scrollTop());
      }
    };

All 5 comments

I had the same issue, but it has nothing to do with mousewheel i think.

I found that Firefox uses a deltaMode of 1, which is scroll per line. So a delta of 3 means 3 lines instead of pixels.

I hacked this into the chosen.jquery.js and it made scrolling a lot faster:

Chosen.prototype.search_results_mousewheel = function(evt) {
     /** Added the factor var and set it's value to 16 when scrolling is line scrolling */
      var delta, factor;
      if (evt.originalEvent) {
        factor = evt.originalEvent.deltaMode === 1 /** DOM_DELTA_LINE */ ? 16 : 1;
        delta = factor * evt.originalEvent.deltaY || -evt.originalEvent.wheelDelta || evt.originalEvent.detail;
      }

      if (delta != null) {
        evt.preventDefault();
        if (evt.type === 'DOMMouseScroll') {
          delta = delta * 40;
        }
        return this.search_results.scrollTop(delta + this.search_results.scrollTop());
      }
    };

Patch proposed by storman works perfectly for us. Is it planned to be published in a future release?

@storeman can you open a pull request with your patch ?

I don't know coffeescript or how to compile/test it with grunt. I've made a fix which i think should work, but I'm unable to test is, so I don't want to create a pull request. My fix in coffeescript can be found here:
https://github.com/tioga-tours/chosen/tree/faster-firefox-scroll

@storeman
Actually it has direct connection to jquery mousewheel, because if you have both plugins, jquery mousewheel transforms mouse events like I mentioned. Without jquery mousewheel scroll behavior is just fine in FF.

So how i fixed that without modifying source code of both plugins - i just do $(..).unmousewheel() in places for each i register .chosen(); One could write simple plugin for that :)

If fixing that in the way you did here
factor = evt.originalEvent.deltaMode === 1 /** DOM_DELTA_LINE */ ? 16 : 1;
then i'd change it to
factor = evt.originalEvent.deltaFactor || 1;

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jbrooksuk picture jbrooksuk  ·  6Comments

vpode picture vpode  ·  5Comments

scottdoc picture scottdoc  ·  7Comments

alexfrancavilla picture alexfrancavilla  ·  9Comments

asvetlenko picture asvetlenko  ·  3Comments