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.6k
Vue with TypeScript
kazumanishihata
0
1.8k
ころばぬ先のテクニカルディレクション
kazumanishihata
1
600
動きのデザインとフロントエンドの連携
kazumanishihata
2
1.6k
RxJSで始めるリアクティブプログラミング
kazumanishihata
1
1.7k
WP REST APIとReactで作るSPA
kazumanishihata
2
9.7k
ぼくらのCONST戦争 SCRIPTY #5
kazumanishihata
2
3.4k
Other Decks in Technology
See All in Technology
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
社内お問い合わせBotの仕組みと学び
nish01
1
530
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
690
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
140
AWS IoT 超入門 2025
hattori
0
280
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
360
Where will it converge?
ibknadedeji
0
200
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
210
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
120
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
200
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Context Engineering - Making Every Token Count
addyosmani
5
220
Automating Front-end Workflow
addyosmani
1371
200k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
RailsConf 2023
tenderlove
30
1.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
It's Worth the Effort
3n
187
28k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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ʯ ศར