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
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
AWS認定を取る中で感じたこと
siromi
1
190
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Lazy application authentication with Tailscale
bluehatbrit
0
210
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Featured
See All Featured
Building an army of robots
kneath
306
45k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Code Reviewing Like a Champion
maltzj
524
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
We Have a Design System, Now What?
morganepeng
53
7.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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ʯ ศར