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

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

035e26d167208e8645a70f7b76b70781?s=128

Kazuma Nishihata

January 12, 2018
Tweet

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