Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使い...
Search
Kazuma Nishihata
January 12, 2018
Technology
1
380
まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使いたい IntersectionObserver』
Kazuma Nishihata
January 12, 2018
Tweet
Share
More Decks by Kazuma Nishihata
See All by Kazuma Nishihata
フロントエンドの技術選定
kazumanishihata
6
6.5k
Vue with TypeScript
kazumanishihata
0
1.8k
ころばぬ先のテクニカルディレクション
kazumanishihata
1
600
動きのデザインとフロントエンドの連携
kazumanishihata
2
1.5k
RxJSで始めるリアクティブプログラミング
kazumanishihata
1
1.7k
WP REST APIとReactで作るSPA
kazumanishihata
2
9.5k
ぼくらのCONST戦争 SCRIPTY #5
kazumanishihata
2
3.4k
Other Decks in Technology
See All in Technology
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Geminiとv0による高速プロトタイピング
shinya337
1
270
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
130
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
BBQ
matthewcrist
89
9.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Making Projects Easy
brettharned
116
6.3k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Building Adaptive Systems
keathley
43
2.7k
Code Reviewing Like a Champion
maltzj
524
40k
Done Done
chrislema
184
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing for humans not robots
tammielis
253
25k
Transcript
εϚʔτϑΥϯαΠτ੍࡞࣮ફߨ࠲ to-R ാҰഅ Section : ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ IntersectionObserver ͷ+4ษڧձʮࡉ͔͗ͯ͢ΘΒͳ͍6*࣮બखݖʯ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ *OUFSTFDUJPO0CTFSWFSʁ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ϒϥβͷදࣔྖҬʹ ཁૉ͕ೖ͔ͬͨͲ͏͔ௐΔ"1*
ͷ+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'));
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ σϞ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ͳΜ͔ͪΌΜͱ͑ΔΑ͏ʹͳͬͯͨ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ϙϦϑΟϧ <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ͬͺ͑ͳ͍ʁ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ͦͦɺແݶεΫϩʔϧͬͯ ΞΫηγϏϦςΟతʹͲ͏ͳͷʁ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ݁
ͷ+4ษڧձʮ͑ͦ͏Ͱ͑ͳ͍͚Ͳ͍͍ͨ*OUFSTFDUJPO0CTFSWFSʯ ศར