Save 37% off PRO during our Black Friday Sale! »

まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使いたい IntersectionObserver』

035e26d167208e8645a70f7b76b70781?s=47 Kazuma Nishihata
January 12, 2018
Technology
1
260

まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使いたい IntersectionObserver』

035e26d167208e8645a70f7b76b70781?s=128

Kazuma Nishihata

January 12, 2018
Tweet

More Decks by Kazuma Nishihata

See All by Kazuma Nishihata
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
6
6k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
0
1k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
1
550
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
2
1.3k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
1
1.2k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
2
6.7k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
2
2.8k

Other Decks in Technology

See All in Technology
7602f2751868682b296171f58589c851?s=48 lyrixx
3
230
A7d90e7c3f69b2d4b0ae054baa550a5e?s=48 icchi
0
110
2a67c9a199a83a5eada6276f20630cb1?s=48 ohr486
2
130
208eaad444edf8029cba3bbd1c0cc864?s=48 takumiogawa
6
3.2k
942bb606679caf4c57b38927f83178e1?s=48 qsona
11
4.1k
484571ccba0db66b69dc11761afdd0c4?s=48 chiroito
1
180
60d4494f2321b322b050ea78acb7b0b1?s=48 matyuda
1
110
26afa82334d1037f0ba602272b950c90?s=48 kazuhitotakahashi
0
220
1dc3bd1bd5485382541fcbfa225a9b22?s=48 tsubasa_umeuchi
2
610
Fc815be82d09a2e922d4000b65b9f83b?s=48 74th
0
360
0e3cc0e218e5bcb4c4da827fb5668f5a?s=48 stopendy
1
140
4cb5b950cfd0eabf5d6b828c951d4549?s=48 loftkun
1
250

Featured

See All Featured
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.2k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
224
15k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.9k
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
2
470
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
163
6.9k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
33
3.1k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
32
2.4k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.2k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
2.9k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
27k

Transcript

  1. εϚʔτϑΥϯαΠτ੍࡞࣮ફߨ࠲ to-R ੢ാҰഅ Section : ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ IntersectionObserver ͷ+4ษڧձʮࡉ͔͗ͯ͢఻ΘΒͳ͍6*࣮૷બखݖʯ

  2. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ *OUFSTFDUJPO0CTFSWFSʁ

  3. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ

  4. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ϒϥ΢βͷදࣔྖҬʹ ཁૉ͕ೖ͔ͬͨͲ͏͔ௐ΂Δ"1*

  5. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ const intersectionChanged = changes => { if (changes[0].intersectionRatio <=

    0) return; console.log('change') }; const observerTarget = new IntersectionObserver(intersectionChanged); observerTarget.observe(document.querySelector('.js-target'));

  6. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ σϞ

  7. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ͳΜ͔ͪΌΜͱ࢖͑ΔΑ͏ʹͳͬͯͨ

  8. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ

  9. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ϙϦϑΟϧ <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

  10. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ΍ͬͺ࢖͑ͳ͍ʁ

  11. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ͦ΋ͦ΋ɺແݶεΫϩʔϧͬͯ ΞΫηγϏϦςΟతʹͲ͏ͳͷʁ

  12. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ

  13. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ݁࿦

  14. ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ศར