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());
}
};
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;
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์์ง๋ง ๋ง์ฐ์ค ํ ๊ณผ ์๋ฌด ๊ด๋ จ์ด ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
Firefox๋ ์ค๋น ์คํฌ๋กค์ธ 1์ deltaMode๋ฅผ ์ฌ์ฉํ๋ค๋ ๊ฒ์ ์์์ต๋๋ค. ๋ฐ๋ผ์ 3์ ๋ธํ๋ ํฝ์ ๋์ 3๊ฐ์ ๋ผ์ธ์ ์๋ฏธํฉ๋๋ค.
๋๋ ์ด๊ฒ์ selected.jquery.js์ ํดํนํ๊ณ ์คํฌ๋กค์ด ํจ์ฌ ๋นจ๋ผ์ก์ต๋๋ค.