Mac๊ณผ PC์ FF์์ ๋ง์ฐ์คํ ์ด์ ํ๋/์ถ์ ๋ฐ๋ชจ(http://timmywil.github.io/jquery.panzoom/demo/)๋ฅผ ์๋ํ์ง๋ง ์๋ํ์ง ์์ต๋๋ค. mousewheel.focal ์ด๋ฒคํธ๊ฐ ํธ๋ฆฌ๊ฑฐ/์ ํ๋์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
์
๋ฐ์ดํธ: ์ธํฐ๋ท ๊ฒ์์ ํด๋ณด๋ FireFox๊ฐ DOMMouseScroll
์ด๋ฒคํธ๋ฅผ ์์ ํด์ผ ํ๋ ๊ฒ์ผ๋ก ๋ํ๋ฌ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์๋ ์ด๋ฒคํธ๋ฅผ ์ ๋ฌํ๋ ๋์ firefox ์ด๋ฒคํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ์ฒด๋ฅผ ๊ตฌ์ฑํ๋ฉด ์๋ํ๋ ๊ฒ์ผ๋ก ๋ํ๋ฌ์ต๋๋ค. ๊ทธ๋์ coffeescript์์ ์ ๋ ์ด๊ฒ์ ํ๋ค:
jquery(@selector).on 'mousewheel.focal', (e) =>
onMouseWheel.call(@, e)
#FF specific mouse wheel support
jquery(@selector).on 'DOMMouseScroll', (e) =>
onMouseWheel.call(@, e)
onMouseWheel = (e) ->
e.preventDefault()
delta = e.originalEvent.wheelDelta
focalPoint = e
if delta is undefined
delta = e.originalEvent.detail
focalPoint =
clientX: e.originalEvent.clientX
clientY: e.originalEvent.clientY
logger.debug "delta=#{delta}", @
@$elem.panzoom 'zoom', delta < 0,
increment: settings.ZOOM_INCREMENT
focal: focalPoint
SVG ํธ๋์ด๊ฐ ํ๋/์ถ์ํ๋ ๋์ 1์ด ๋์ 4๊ฐ์ ์ฌ๋ถ๋ฉด์ผ๋ก ๋ถํ ๋๋ FF์์ ํ๋/์ถ์ํ ๋ ๋ช ๊ฐ์ง ์ด์ํ ๊ทธ๋ํฝ ๊ฒฐํจ์ ๋ฐ๊ฒฌํ์ต๋๋ค. ์ฌ์(์ฆ, ๋ค๋ฅธ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์ ๋ค๋ฆ)
FF๋ฅผ ์ง์ํ๋๋ก ๋ฐ๋ชจ ํ์ด์ง๋ฅผ ์ ๋ฐ์ดํธํ ๊ฐ์น๊ฐ ์์ ๊ฒ์ ๋๋ค.
๊ฐ์ฌํฉ๋๋ค. ๋ฐ๋ชจ ํ์ด์ง๋ฅผ ์ ๋ฐ์ดํธํ๊ฒ ์ต๋๋ค.
์๋ ํ์ธ์
๊ทธ๋ฐ ์ค๋๋ ์ฃผ์ ๋ฅผ ๊ฑด๋๋ ค์ ์ฃ์กํฉ๋๋ค. ์ด ํ๋ฌ๊ทธ์ธ์ด ์์ผ๋ฉด ์ต์ ๋ฒ์ ์ด Firefox์์ ์๋ํ์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ด ๋ฌธ์ ๋ฅผ ์ฐพ์ ๋๊น์ง ๋๋ ์ด๊ฒ์ ๋ชฐ๋์ต๋๋ค. .bowerrc
์ ๋ํ ์ปค๋ฐ ๋๋ฌธ์ ์ด ๋ฌธ์ ๋ฅผ ์ฐพ์์ต๋๋ค. ์ง๋ 3๋
๋์ ๋ฌธ์ ๋ฅผ ์ฐธ์กฐํ๋ ์ ์ผํ ์ปค๋ฐ์ด์์ต๋๋ค(๋ฆฌํฌ์งํ ๋ฆฌ ์ฒซ ํ์ด์ง์์ ๋ณผ ์ ์์).
์ด๊ฒ์ด Firefox์์ ์๋ํ๋ ค๋ฉด https://github.com/jquery/jquery-mousewheel ์ด ํ์ํ๋ค๋ FAQ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ด ์ ์ฉํ ๊น์? (์๋๋ฉด ๋ด๊ฐ ์์ ํ ๋์ด ๋ฉ์๋?)
์ฝ๋ํ ์: http://codepen.io/viion/pen/eBaVzN
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ ํ์ธ์
๊ทธ๋ฐ ์ค๋๋ ์ฃผ์ ๋ฅผ ๊ฑด๋๋ ค์ ์ฃ์กํฉ๋๋ค. ์ด ํ๋ฌ๊ทธ์ธ์ด ์์ผ๋ฉด ์ต์ ๋ฒ์ ์ด Firefox์์ ์๋ํ์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ด ๋ฌธ์ ๋ฅผ ์ฐพ์ ๋๊น์ง ๋๋ ์ด๊ฒ์ ๋ชฐ๋์ต๋๋ค.
.bowerrc
์ ๋ํ ์ปค๋ฐ ๋๋ฌธ์ ์ด ๋ฌธ์ ๋ฅผ ์ฐพ์์ต๋๋ค. ์ง๋ 3๋ ๋์ ๋ฌธ์ ๋ฅผ ์ฐธ์กฐํ๋ ์ ์ผํ ์ปค๋ฐ์ด์์ต๋๋ค(๋ฆฌํฌ์งํ ๋ฆฌ ์ฒซ ํ์ด์ง์์ ๋ณผ ์ ์์).์ด๊ฒ์ด Firefox์์ ์๋ํ๋ ค๋ฉด https://github.com/jquery/jquery-mousewheel ์ด ํ์ํ๋ค๋ FAQ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ด ์ ์ฉํ ๊น์? (์๋๋ฉด ๋ด๊ฐ ์์ ํ ๋์ด ๋ฉ์๋?)
์ฝ๋ํ ์: http://codepen.io/viion/pen/eBaVzN