Ngx-drag-scroll: moveRight ๋ฉ”์„œ๋“œ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ RTL ์ง€์› ๋ฌธ์ œ

์— ๋งŒ๋“  2018๋…„ 06์›” 19์ผ  ยท  11์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: bfwg/ngx-drag-scroll

  • ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค...

    • [x] ๋ฒ„๊ทธ ๋ณด๊ณ ์„œ

  • ํ˜„์žฌ ํ–‰๋™์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
    ๋ฌธ์ œ ๋ณด๊ณ ์„œ ํ•˜๋‚˜์™€ ์งˆ๋ฌธ ํ•˜๋‚˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
    1- currIndex ๊ฐ€ ์‹ค์ˆ˜๋กœ ๋ฐฐ์—ด ๊ฒฝ๊ณ„๋ฅผ ๋ฒ—์–ด๋‚ฌ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. CurrentChildWith ํ•จ์ˆ˜์—์„œ (274ํ–‰) length - 1 ๋กœ ์„ค์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. - if ๋ฌธ์˜ ์กฐ๊ฑด์ฒ˜๋Ÿผ -. ์ด๊ฒƒ์€ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ด๋™์„ ๋ฉˆ์ถฅ๋‹ˆ๋‹ค.
    2- RTL ์ง€์›์— ๋งŽ์€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. reachesRightBound ๋Š” ์ดˆ๊ธฐ์— false๋ฅผ ๋‚ด๋ณด๋‚ด๊ณ  moveLeft ๋Š” ์™ผ์ชฝ ๊ฒฝ๊ณ„์— ๋„๋‹ฌํ•œ ํ›„์—๋„ ์ž‘๋™ํ•˜์ง€๋งŒ ๋™์ผํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅธ์ชฝ ๊ฒฝ๊ณ„.

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

@MortezaT๋‹˜ , ๋‹ต๋ณ€์ด ๋Šฆ์–ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ข€ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์žฌ์ƒ์‚ฐ ๋‹จ๊ณ„์™€ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์•Œ๋ ค์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ๊ฐ์‚ฌ ํ•ด์š”!

์•ˆ๋…•ํ•˜์„ธ์š” @bfwg๋‹˜ , ๋‹ต๋ณ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
์ง€๊ธˆ์€ ๋‹ค๋ฅธ ์ผ๋“ค๋กœ ๊ฝค ๋ฐ”์˜์ง€๋งŒ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ฌธ์ œ ์—†์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ„์„ ๋‚ด์‹ญ์‹œ์˜ค.

์—ฌ๊ธฐ์—์„œ ๋‚ด ๊ตฌํ˜„์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ฌธ์ œ์— ๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” @MortezaT , 2.0.0-beta.2๊ฐ€ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ตฌํ˜„ ๋ฌธ์ œ๋ฅผ ์ตœ์•… ๋˜๋Š” ๋” ์ข‹๊ฒŒ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ ํ•ด์š”!

beta.2๋„ beta.3๋„ ์ „ํ˜€ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
๊ทธ๋“ค์€ ๋‘˜ ๋‹ค ๊ฐ๋„์— ์˜ํ•ด ์ธ์‹๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ๊ฒƒ์„ ์•”์‹œํ•˜๋Š” ์˜ค๋ฅ˜๋ฅผ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ์˜ค๋ฅ˜์ž…๋‹ˆ๋‹ค.

 Can't bind to 'scrollbar-hidden' since it isn't a known property of 'div'.

๋‚ด๊ฐ€ ๋ญ ๋†“์นœ ๊ฑฐ ์—†๋‹ˆ?

์•ˆ๋…•ํ•˜์„ธ์š” @MortezaT , 2.0.0์€ div ๋Œ€์‹  ์บ๋Ÿฌ์…€ ํ˜ธ์ŠคํŠธ ์š”์†Œ๋กœ drag-scroll ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์ž์‹ ์š”์†Œ๋ฅผ ํ‘œ์‹œํ•˜๋ ค๋ฉด drag-scroll-item ์ง€์‹œ๋ฌธ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  <drag-scroll>
    <img drag-scroll-item src="some-url" />
    <img drag-scroll-item src="some-url" />
    <img drag-scroll-item src="some-url" />
  </drag-scroll>

์ž์„ธํ•œ ๋‚ด์šฉ์€ README.md์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฑด๋ฐฐ.

์•ˆ๋…•ํ•˜์„ธ์š” @bfwg ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
๋„ˆ๋ฌด ๋‹ค๋ฅธ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— ์ƒˆ ๋ฒ„์ „์— ๋Œ€ํ•œ ๋ฌธ์„œ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?
20px ์˜ ๋„ˆ๋น„์™€ ๋†’์ด์— .drag-scroll-content 20px ์ถ”๊ฐ€๊ฐ€ ์žˆ๋Š” ์ด์œ ๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์Šคํฌ๋กค ๋ง‰๋Œ€๋ฅผ ์ˆจ๊ธฐ๋ ค๋ฉด ์ƒˆ ๋ž˜ํผ div๋ฅผ ๋งŒ๋“ค๊ณ  ์ƒ์œ„ div์™€ ์บ๋Ÿฌ์…€ div(.drag-scroll-content) ์‚ฌ์ด์— div๋ฅผ ์‚ฝ์ž…ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด:
์ด๊ฒƒ์€ ์ •์ƒ์ ์ธ ํšŒ์ „ ๋ชฉ๋งˆ์ž…๋‹ˆ๋‹ค
image

์Šคํฌ๋กค๋ฐ”๋ฅผ ์ˆจ๊ธฐ๋ ค๊ณ  ํ•  ๋•Œ ๋งˆ๋ฒ•์€ ์—†์Šต๋‹ˆ๋‹ค! ๋ž˜ํผ div๋ฅผ ๋งŒ๋“ค๊ณ  ํ•ด๋‹น ๋ž˜ํผ div์˜ ํฌ๊ธฐ๋ฅผ ์ปจํ…Œ์ด๋„ˆ div์™€ ๋™์ผํ•˜์ง€๋งŒ ์Šคํฌ๋กค๋ฐ” ๋„ˆ๋น„/๋†’์ด๋ฅผ ๋บ€ ํฌ๊ธฐ๋กœ ์„ค์ •ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. 20px ๋Š” ํ˜„์žฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์Šคํฌ๋กค๋ฐ”์˜ ๋†’์ด/๋ฌด๊ฒŒ์ž…๋‹ˆ๋‹ค.

image

๋งˆ์ง€๋ง‰์œผ๋กœ ์ปจํ…Œ์ด๋„ˆ div๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ  ๋ž˜ํผ div๋ฅผ ๋ถ€๋ชจ div์— ์—ฐ๊ฒฐํ•œ ๋‹ค์Œ ์ปจํ…Œ์ด๋„ˆ div๋ฅผ ๋ž˜ํผ div์— ๋‹ค์‹œ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

image

๋ž˜ํผ์˜ ์˜ค๋ฒ„ํ”Œ๋กœ ์†์„ฑ์ด '์ˆจ๊น€'์œผ๋กœ ์„ค์ •๋˜์—ˆ์œผ๋ฏ€๋กœ ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋” ์ด์ƒ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์ œ ๊ทธ๋ฆผ ์‹ค๋ ฅ์ด ๊ฒŒ์ž„๊นŒ์ง€ ์ด์–ด์ง€๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค ๐Ÿ˜›

์งˆ๋ฌธ์ด ๋” ์žˆ๊ฑฐ๋‚˜ ์ƒˆ ๋ฒ„์ „์œผ๋กœ ์ธํ•ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”.

๊ฐ์‚ฌ ํ•ด์š”!

@bfwg
๊ฐ์‚ฌ ํ•ด์š”. ์ด์ œ ์ด ์‹œ๊ฐ์  ์„ค๋ช…์œผ๋กœ ๋ชจ๋“  ๊ฒƒ์ด ๋ถ„๋ช…ํ•ด์กŒ์œผ๋ฉฐ ์ด๊ฒƒ์ด ํ˜„๋ช…ํ•œ ์ƒ๊ฐ์ž„์„ ๊ณ ๋ฐฑํ•ฉ๋‹ˆ๋‹ค.
์ฒ˜์Œ ํƒ์ƒ‰ํ•˜๋Š” ๊ฒƒ์„ ์ œ์™ธํ•˜๊ณ ๋Š” ๋ชจ๋“  ๊ฒƒ์ด ๊ดœ์ฐฎ์•„ ๋ณด์ž…๋‹ˆ๋‹ค. navs ์ž‘๋™ํ•˜๋„๋ก ํ•˜๋ ค๋ฉด ์กฐ๊ธˆ ์ „์—(์™„์ „ํ•œ ์‚ฌ์ง„์€ ์•„๋‹˜) ๋“œ๋ž˜๊ทธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
ํ•œํŽธ moveRight ๋ฉ”์„œ๋“œ๋Š” ํ˜„์žฌ ์ž‘๋™ํ•˜๊ณ  ์Šคํฌ๋กค์„ ์™ผ์ชฝ(๋)์œผ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ์—ด์–ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์•Œ๋ ค์ฃผ์„ธ์š”. ๊ฐ์‚ฌ ํ•ด์š”!

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