Chosen: ํœ  ์Šคํฌ๋กค์€ jquery-mousewheel ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ํ•จ๊ป˜ FireFox์—์„œ ๋Š๋ ค์ง‘๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 06์›” 01์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: harvesthq/chosen

jquery-mousewheel ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉ์‹œ ์žฌํ˜„๋ฉ๋‹ˆ๋‹ค.

https://jsfiddle.net/4Lba076o/ ์ฐธ์กฐ

Chrome์—์„œ๋Š” ์Šคํฌ๋กค์ด ์ •์ƒ์ž…๋‹ˆ๋‹ค.
Firefox์—์„œ๋Š” ๋งค์šฐ ๋Š๋ฆฝ๋‹ˆ๋‹ค(1px).

๊ธฐ๋ณธ์ ์œผ๋กœ ๋งˆ์šฐ์Šค ํœ  ๋™์ž‘์€ event.deltaFactor๋ฅผ ํ™œ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค(๋น„ํ‘œ์ค€์ด์ง€๋งŒ).
Firefox์—์„œ jquery-mousewheel์€ {deltaY: -42}์—์„œ {deltaY: -1, deltaFactor: 42}๋กœ ์ด๋ฒคํŠธ๋ฅผ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์ง€๋งŒ ๋งˆ์šฐ์Šค ํœ ๊ณผ ์•„๋ฌด ๊ด€๋ จ์ด ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Firefox๋Š” ์ค„๋‹น ์Šคํฌ๋กค์ธ 1์˜ deltaMode๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ 3์˜ ๋ธํƒ€๋Š” ํ”ฝ์…€ ๋Œ€์‹  3๊ฐœ์˜ ๋ผ์ธ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์„ selected.jquery.js์— ํ•ดํ‚นํ–ˆ๊ณ  ์Šคํฌ๋กค์ด ํ›จ์”ฌ ๋นจ๋ผ์กŒ์Šต๋‹ˆ๋‹ค.

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

๋ชจ๋“  5 ๋Œ“๊ธ€

๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์ง€๋งŒ ๋งˆ์šฐ์Šค ํœ ๊ณผ ์•„๋ฌด ๊ด€๋ จ์ด ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Firefox๋Š” ์ค„๋‹น ์Šคํฌ๋กค์ธ 1์˜ deltaMode๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ 3์˜ ๋ธํƒ€๋Š” ํ”ฝ์…€ ๋Œ€์‹  3๊ฐœ์˜ ๋ผ์ธ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์„ selected.jquery.js์— ํ•ดํ‚นํ–ˆ๊ณ  ์Šคํฌ๋กค์ด ํ›จ์”ฌ ๋นจ๋ผ์กŒ์Šต๋‹ˆ๋‹ค.

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

storman์ด ์ œ์•ˆํ•œ ํŒจ์น˜๋Š” ์šฐ๋ฆฌ์—๊ฒŒ ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ํ–ฅํ›„ ๋ฆด๋ฆฌ์Šค์— ๊ฒŒ์‹œ๋  ์˜ˆ์ •์ž…๋‹ˆ๊นŒ?

@storeman ํŒจ์น˜๋กœ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ์—ด ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚˜๋Š” coffeescript๋‚˜ grunt๋กœ ์ปดํŒŒ์ผ/ํ…Œ์ŠคํŠธํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค. ์ž‘๋™ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ์ˆ˜์ • ์‚ฌํ•ญ์„ ๋งŒ๋“ค์—ˆ์ง€๋งŒ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ๋Œ์–ด์˜ค๊ธฐ ์š”์ฒญ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Coffeescript์˜ ์ˆ˜์ • ์‚ฌํ•ญ์€ ์—ฌ๊ธฐ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
https://github.com/tioga-tours/chosen/tree/faster-firefox-scroll

@์ ์›
์‹ค์ œ๋กœ jquery mousewheel์— ์ง์ ‘ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ๋ชจ๋‘ ์žˆ๋Š” ๊ฒฝ์šฐ jquery mousewheel์ด ๋‚ด๊ฐ€ ์–ธ๊ธ‰ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ๋ฅผ ๋ณ€ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. jquery๊ฐ€ ์—†์œผ๋ฉด FF์—์„œ ๋งˆ์šฐ์Šค ํœ  ์Šคํฌ๋กค ๋™์ž‘์ด ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋‘ ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ  ์ˆ˜์ •ํ•œ ๋ฐฉ๋ฒ• - ๊ฐ i register .chosen()์— ๋Œ€ํ•ด $(..).unmousewheel()์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•œ ๊ฐ„๋‹จํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. :)

์—ฌ๊ธฐ์—์„œ ํ–ˆ๋˜ ๋ฐฉ์‹์œผ๋กœ ์ˆ˜์ •ํ•˜๋ฉด
factor = evt.originalEvent.deltaMode === 1 /** DOM_DELTA_LINE */ ? 16 : 1;
๊ทธ๋Ÿฐ ๋‹ค์Œ ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๋ณ€๊ฒฝํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค
factor = evt.originalEvent.deltaFactor || 1;

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰