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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ͷ+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'));

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ͷ+4ษڧձʮ࢖͑ͦ͏Ͱ࢖͑ͳ͍͚Ͳ࢖͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ϙϦϑΟϧ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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