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

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