Panzoom: Firefox์—์„œ ์ดˆ์  ๋งˆ์šฐ์Šคํœ  ํ™•๋Œ€/์ถ•์†Œ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2013๋…„ 09์›” 04์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: timmywil/panzoom

Mac๊ณผ PC์˜ FF์—์„œ ๋งˆ์šฐ์Šคํœ  ์ดˆ์  ํ™•๋Œ€/์ถ•์†Œ ๋ฐ๋ชจ(http://timmywil.github.io/jquery.panzoom/demo/)๋ฅผ ์‹œ๋„ํ–ˆ์ง€๋งŒ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. mousewheel.focal ์ด๋ฒคํŠธ๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ/์„ ํƒ๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

์•ˆ๋…•ํ•˜์„ธ์š”

๊ทธ๋Ÿฐ ์˜ค๋ž˜๋œ ์ฃผ์ œ๋ฅผ ๊ฑด๋“œ๋ ค์„œ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์—†์œผ๋ฉด ์ตœ์‹  ๋ฒ„์ „์ด Firefox์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ์ฐพ์„ ๋•Œ๊นŒ์ง€ ๋‚˜๋Š” ์ด๊ฒƒ์„ ๋ชฐ๋ž์Šต๋‹ˆ๋‹ค. .bowerrc ์— ๋Œ€ํ•œ ์ปค๋ฐ‹ ๋•Œ๋ฌธ์— ์ด ๋ฌธ์ œ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ์ง€๋‚œ 3๋…„ ๋™์•ˆ ๋ฌธ์ œ๋ฅผ ์ฐธ์กฐํ•˜๋Š” ์œ ์ผํ•œ ์ปค๋ฐ‹์ด์—ˆ์Šต๋‹ˆ๋‹ค(๋ฆฌํฌ์ง€ํ† ๋ฆฌ ์ฒซ ํŽ˜์ด์ง€์—์„œ ๋ณผ ์ˆ˜ ์žˆ์Œ).

์ด๊ฒƒ์ด Firefox์—์„œ ์ž‘๋™ํ•˜๋ ค๋ฉด https://github.com/jquery/jquery-mousewheel ์ด ํ•„์š”ํ•˜๋‹ค๋Š” FAQ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ• ๊นŒ์š”? (์•„๋‹ˆ๋ฉด ๋‚ด๊ฐ€ ์™„์ „ํžˆ ๋ˆˆ์ด ๋ฉ€์—ˆ๋‚˜?)

์ฝ”๋“œํŽœ ์˜ˆ: http://codepen.io/viion/pen/eBaVzN

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

์—…๋ฐ์ดํŠธ: ์ธํ„ฐ๋„ท ๊ฒ€์ƒ‰์„ ํ•ด๋ณด๋‹ˆ 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

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