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

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

まぼろしの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
5.8k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
0
810
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
1
530
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
2
1.2k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
1
1k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
2
6.5k
035e26d167208e8645a70f7b76b70781?s=48 kazumanishihata
2
2.6k

Other Decks in Technology

See All in Technology
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
100
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
750
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
230
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
150
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
150
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
130
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
2
810
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
Ff1e356e879c9a03c73e7891cb9d63a6?s=48 makomakok
0
210
744a38d972036c3bd0bcdaddafdd5f26?s=48 mathetake
6
860

Featured

See All Featured
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
480
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
436
28k
Ba530e786553390f3fb271848485681c?s=48 3n
162
22k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
282
46k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
168
6.9k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.4k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
56
5.3k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1349
190k

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ʯ ศར