結論: JavaScriptは必要です。もっともっと選択肢を増やしましょう。
- フロントエンドのプログラムを見直す話 - Intersection/Resize Observer API - matchMedia API - addEventListener Passive Option
ຊʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQUʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙτϨϯυͷ8FCςΫϊϩδʔͱɺίϛϡχέʔγϣϯ"1*ʢ5XJMJPʣ!Ԭ
View Slide
©2018 Yusuke Hiraoࣗݾհฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣגࣜձࣾσΟʔθϩϑϩϯτΤϯυΤϯδχΞ#-0(IUUQTOPUFNVZVTVLFIJSBPYusuke Hirao@cloud10designs
©2018 Yusuke HiraoNBSLVQMJOUԠԉ͓Ͷ͕͍͠·͢Φʔϓϯιʔε/PEFKT)5.--JOUFS
©2018 Yusuke HiraoຊʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQUʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙ
©2018 Yusuke Hirao͔݁Β
©2018 Yusuke Hirao+BWB4DSJQUඞཁͰ͢
©2018 Yusuke HiraoͬͱͬͱબࢶΛ૿͠·͠ΐ͏
©2018 Yusuke HiraoͬͱͬͱબࢶΛ૿͠·͠ΐ͏खࡳΛͨ͘͞Μ͍࣋ͬͯΔਓڧ͍ʂ
©2018 Yusuke HiraoΞδΣϯμࠓ͢͜ͱϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢*OUFSTFDUJPO3FTJ[F0CTFSWFS"1*NBUDI.FEJB"1*BEE&WFOU-JTUFOFS1BTTJWF0QUJPO
©2018 Yusuke Hiraoʑͷίʔυɺ
©2018 Yusuke Hiraoʑͷίʔυɺߋ৽ͯ͠·͔͢ʁ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢8FCͷਐԽਐ݄าࡢͰ͖ͳ͔ͬͨ͜ͱ͕ࠓͰ͖Δ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢8FCͷਐԽਐ݄าࡢͰ͖ͳ͔ͬͨ͜ͱ͕ࠓͰ͖Δ͍͍ͭͬͯΔख๏͕࠷దղͰͳ͘ͳ͍ͯΔՄೳੑ͕͋Δ͔ͱ͍ٙͬͯ·͔͢ʁ
©2018 Yusuke Hiraoॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ
©2018 Yusuke HiraoʮҐஔΛܭࢉͯ͠ʯʁʂ
©2018 Yusuke Hiraoຊʹܭࢉ͠ͳ͍ͱμϝͳͷʁͬͱखܰʹΘ͔ΔΑ͏ʹͳΒͳ͍ͷʁ
©2018 Yusuke Hirao৽͍͠"1*͋Γ·͢
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦ˞ৄ͘͠ޙ΄Ͳ
©2018 Yusuke Hiraoͳͥ͜ͷ"1*͕ੜ·Εͨͷ͔എܠΛߟ͑Δ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦεΫϩʔϧ͢Δͨͼ͘͠ఆظతʹܭࢉͷॲཧ͕ඞͣൃੜ͢Δ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦεΫϩʔϧ͢Δͨͼ͘͠ఆظతʹܭࢉͷॲཧ͕ඞͣൃੜ͢Δසൟʹ࣮ߦ͞ΕΔ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦεΫϩʔϧ͢Δͨͼ͘͠ఆظతʹܭࢉͷॲཧ͕ඞͣൃੜ͢Δසൟʹ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ඳըʹѱӨڹ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦεΫϩʔϧ͢Δͨͼ͘͠ఆظతʹܭࢉͷॲཧ͕ඞͣൃੜ͢Δසൟʹ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ඳըʹѱӨڹදࣔ͞Εͳ͍ҐஔͰॲཧ͞Εଓ͚Δ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦεΫϩʔϧ͢Δͨͼ͘͠ఆظతʹܭࢉͷॲཧ͕ඞͣൃੜ͢Δසൟʹ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ඳըʹѱӨڹදࣔ͞Εͳ͍ҐஔͰॲཧ͞Εଓ͚ΔύϑΥʔϚϯε͕ඇৗʹѱ͍
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦϒϥβ͕෦తʹࢹඳըʹӨڹΛ༩͑ͳ͍
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢ॎʹ͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨैདྷͷओͳ࣮ํ๏ᶃεΫϩʔϧ͢ΔͨͼʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦᶄλΠϚʔΛͬͯఆظతʹରͷཁૉͷҐஔΛܭࢉͯ͠ɺɹɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ*OUFSTFDUJPO0CTFSWFS"1*Λ͏ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕͯ͠ΞχϝʔγϣϯΛ࣮ߦϒϥβ͕෦తʹࢹඳըʹӨڹΛ༩͑ͳ͍Α͘ར༻͞ΕΔ࣮ͳͷͰϒϥβ͕ࣗࡌͨ͠
©2018 Yusuke HiraoϒϥβͪΌΜͱਐԽ͍ͯ͠Δʂ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢8FCͷਐԽਐ݄าࡢͰ͖ͳ͔ͬͨ͜ͱ͕ࠓͰ͖Δ͍͍ͭͬͯΔख๏͕࠷దղͰͳ͘ͳ͍ͯΔՄೳੑ͕͋Δʂʂ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢8FCͷਐԽਐ݄าࡢͰ͖ͳ͔ͬͨ͜ͱ͕ࠓͰ͖Δ͍͍ͭͬͯΔख๏͕࠷దղͰͳ͘ͳ͍ͯΔՄೳੑ͕͋Δʂʂຊʹͦͷ+BWB4DSJQUͷίʔυ͕ඞཁͳͷ͔ࠓҰݟͦ͏
©2018 Yusuke Hirao2ݹ͍ϒϥβͰಈ͘ΜͰ͔͢ʁ
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢2ݹ͍ϒϥβͰಈ͘ΜͰ͔͢ʁ͑/PʂʂͰϙϦϑΟϧͱ͍͏ݹ͍ϒϥβͰͦΕΛͰ͖Δ͚ͩ࠶ݱ͢ΔϥΠϒϥϦ͕͋Γ·͢ɻ৽͍͠ϒϥβࡌ͞Ε͍ͯΔ"1*Λɺݹ͍ϒϥβैདྷͷํ๏ͰॲཧΛ͚͚ۙͮ·͢ɻ
©2018 Yusuke Hirao2͑ʁ͡Ό͋ैདྷͷํ๏Ͱ͍͍͡Όͳ͍
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢2͑ʁ͡Ό͋ैདྷͷํ๏Ͱ͍͍͡Όͳ͍ͦΜͳ͜ͱͳ͍Ͱ͢৽͍͠ϒϥβͰ͖ͪΜͱͦͷύϑΥʔϚϯεͷԸܙΛड͚Δ͜ͱ͕Ͱ͖·͢ɻ৽͍͠ϒϥβͰϝϦοτͷΈɻݹ͍ϒϥβͰϝϦοτɾσϝϦοτͳ͘Ωʔϓɻ
©2018 Yusuke Hirao2ϙϦϑΟϧόά͕͋Δͱฉ͖·ͨ͠
©2018 Yusuke HiraoϑϩϯτΤϯυͷϓϩάϥϜΛݟ͢2ϙϦϑΟϧόά͕͋Δͱฉ͖·ͨ͠Թ͔͍ͰݟकΓ·͠ΐ͏ϙϦϑΟϧ͡Όͳͯ͘όά͖Ͱ͢ɻϒϥβࣗମ͕όάΛͭ͜ͱ͋Δɻ৺Ͱ͋Εɺ͋·ΓτϦοΩʔͳ࣮Λͤͣɺ"1*ͷϕʔγοΫͳ͍ํʹཹΊΔͷ͕͍͍Ͱ͠ΐ͏ɻ
©2018 Yusuke Hirao*OUFSTFDUJPO3FTJ[F0CTFSWFS"1*!// ࢹΦϒδΣΫτconst observer = new IntersectionObserver(!// ަࠩ࣌ͷॲཧ(entries) !=> {for (const entey of entries) { !// ަࠩͨ͠ཁૉͱͦͷใ͕ೖ͍ͬͯΔΦϒδΣΫτͷྻ!// ަࠩͨ͠ཁૉʹରͯ͠ͷॲཧ!// ྫ) CSSΫϥεΛ༩entey.target.classList.add('enter');}},!// IntersectionObserverΦϓγϣϯ{!// ᮢthreshold: 1,});!// ཁૉΛࢹ͢Δobserver.observe(document.querySelector('.inview'));*OUFSTFDUJPO0CTFSWFSཁૉ͕දࣔྖҬͱަ͔ࠩͨ͠ࢹ͢Δ
©2018 Yusuke Hirao*OUFSTFDUJPO3FTJ[F0CTFSWFS"1*!// ࢹΦϒδΣΫτconst observer = new ResizeObserver(!// αΠζ͕มԽͨ࣌͠ͷॲཧ(entries) !=> {for (const entey of entries) { !// αΠζ͕มԽͨ͠ཁૉͱͦͷใ͕ೖ͍ͬͯΔΦϒδΣΫτͷྻ!// αΠζ͕มԽͨ͠ཁૉʹରͯ͠ͷॲཧ!// ྫ) αΠζʹΑͬͯCSSΫϥεΛ༩if (entry.contentRect.width < 300) {entey.target.classList.add('small');} else {entey.target.classList.remove('small');}}});!// ཁૉΛࢹ͢Δobserver.observe(document.querySelector('.elastic'));3FTJ[F0CTFSWFSཁૉͷαΠζ͕มߋ͞Ε͔ͨࢹ͢Δ
©2018 Yusuke Hirao*OUFSTFDUJPO3FTJ[F0CTFSWFS"1*ͦͷଞͷ0CTFSWFSܥͷ"1*.VUBUJPO0CTFSWFSཁૉͷ༰ଐੑ͕มߋ͞Ε͔ͨࢹ͢Δ1FSGPSNBODF0CTFSWFSύϑΥʔϚϯεΛଌఆ͢Δ5JNJOH"1*ͷมߋΛࢹ͢ΔK2VFSZͷPOϝιουBEE&WFOU-JTUFOFSͷ࣮ํ๏ͱͪΐͬͱҟͳΔͷͰ࠷ॳ׳Εͳ͍͚Ͳɺ0CTFSWFSܥͷ"1*ൺֱతࣅ͍ͯΔΠϯλʔϑΣΠεͳͷͰɺ͜ͷύλʔϯ͓֮͑ͯ͘ͱ͍͍Ͱ͠ΐ͏ɻconst observer = new XXXObserver(callback);observer.observe(target);
©2018 Yusuke HiraoNBUDI.FEJB"1*NBUDI.FEJB.FEJB2VFSZ-JTU$44ͷϝσΟΞΫΤϦʔͷఆΛ+BWB4DSJQUͰར༻Ͱ͖Δ!// CSSͷ@mediaͱಉ͡ΫΤϦʔΛఆٛ͢Δconst mediaQueryList = matchMedia('(max-width: 768px)');!// ఆٛͨ͠ϝσΟΞΫΤϦʔʹϚον͍ͯ͠Δ͔Ͳ͏͔ͷ݅ذif (mediaQueryList.matches) {console.log('εϚϗ༻ͷॲཧ');} else {console.log('PC/λϒϨοτ༻ͷॲཧ');}!// ϒϨʔΫϙΠϯτͷมߋΛݕ͢Δ͜ͱͰ͖Δ!// มߋ࣌ͷΈ࣮ߦ͞ΕΔͷͰϦαΠζΠϕϯτͰৗʹαΠζΛଌΔඞཁ͕ͳ͘ͳΔmediaQueryList.addListener(() !=> {if (mediaQueryList.matches) {console.log('εϚϗ༻ͷॲཧ');} else {console.log('PC/λϒϨοτ༻ͷॲཧ');}});
©2018 Yusuke HiraoNBUDI.FEJB"1*NBUDI.FEJB.FEJB2VFSZ-JTU$44ͷϝσΟΞΫΤϦʔͷఆΛ+BWB4DSJQUͰར༻Ͱ͖Δ!// CSSͷ@mediaͱಉ͡ΫΤϦʔΛఆٛͰ͖ΔͷͰɺ!// ϏϡʔϙʔταΠζҎ֎ͷఆͰ͖ΔmatchMedia('print');matchMedia('screen and (min-width: 640px)');matchMedia('(orientation: portrait)');matchMedia('(orientation: landscape)');matchMedia('(min-resolution: 2dppx)’);
©2018 Yusuke HiraoBEE&WFOU-JTUFOFS1BTTJWF0QUJPOैདྷͷεΫϩʔϧΠϕϯτॲཧwindow.addEventListener('scroll',!// ΠϕϯτϦεφʔ(event) !=> {!// εΫϩʔϧ࣌ͷ!// Կ͔͠ΒͷॲཧdoSomething();!// ộevent.preventDefault();!// orreturn false;});ϒϥβͷεΫϩʔϧΛڧ੍తʹࢭΊΔ͜ͱ͕Ͱ͖Δɻ
©2018 Yusuke HiraoBEE&WFOU-JTUFOFS1BTTJWF0QUJPOैདྷͷεΫϩʔϧΠϕϯτॲཧwindow.addEventListener('scroll',!// ΠϕϯτϦεφʔ(event) !=> {!// εΫϩʔϧ࣌ͷ!// Կ͔͠ΒͷॲཧdoSomething();!// ộ});ඞਢͳΘ͚Ͱͳ͍ͷͰϒϥβͷεΫϩʔϧͷڍಈͱΠϕϯτϦεφʔͷॲཧΛ͋Θ࣮ͤͯߦ͢Δ͜ͱ͕Ͱ͖Δ
©2018 Yusuke HiraoBEE&WFOU-JTUFOFS1BTTJWF0QUJPOैདྷͷεΫϩʔϧΠϕϯτॲཧwindow.addEventListener('scroll',!// ΠϕϯτϦεφʔ(event) !=> {!// εΫϩʔϧ࣌ͷॲཧ!// Կ͔͠ΒͷॲཧdoSomething();!// ộ});lTDSPMMzΠϕϯτൃੜϚεͷૢ࡞ͳͲEP4PNFUIJOH EFGBVMU1SFWFOUFEఆϒϥβ͕εΫϩʔϧҐஔΛมߋ
©2018 Yusuke HiraoBEE&WFOU-JTUFOFS1BTTJWF0QUJPOैདྷͷεΫϩʔϧΠϕϯτॲཧwindow.addEventListener('scroll',!// ΠϕϯτϦεφʔ(event) !=> {!// εΫϩʔϧ࣌ͷॲཧ!// Կ͔͠ΒͷॲཧdoSomething();!// ộ});lTDSPMMzΠϕϯτൃੜϚεͷૢ࡞ͳͲEP4PNFUIJOH EFGBVMU1SFWFOUFEఆϒϥβ͕εΫϩʔϧҐஔΛมߋQSFWFOU%FGBVMU ΛݺΜͰ͍Α͏͕ͳ͔ΒΖ͏͕ఆ͕͋Δ
©2018 Yusuke HiraoBEE&WFOU-JTUFOFS1BTTJWF0QUJPOैདྷͷεΫϩʔϧΠϕϯτॲཧwindow.addEventListener('scroll',!// ΠϕϯτϦεφʔ(event) !=> {!// εΫϩʔϧ࣌ͷॲཧ!// Կ͔͠ΒͷॲཧdoSomething();!// ộ});lTDSPMMzΠϕϯτൃੜϚεͷૢ࡞ͳͲEP4PNFUIJOH EFGBVMU1SFWFOUFEఆϒϥβ͕εΫϩʔϧҐஔΛมߋQSFWFOU%FGBVMU ΛݺΜͰ͍Α͏͕ͳ͔ΒΖ͏͕ఆ͕͋Δ͜͜ͷॲཧ͕ॏ͍ͱεΫϩʔϧδϟοΩϯάൃੜ
©2018 Yusuke HiraoBEE&WFOU-JTUFOFS1BTTJWF0QUJPO1BTTJWF0QUJPOQSFWFOU%FGBVMU Λݺͼग़͞ͳ͍͜ͱΛࢦఆ͢ΔΦϓγϣϯwindow.addEventListener('scroll',!// ΠϕϯτϦεφʔ(event) !=> {!// εΫϩʔϧ࣌ͷॲཧ!// Կ͔͠ΒͷॲཧdoSomething();!// ộ},{passive: true,});lTDSPMMzΠϕϯτൃੜϚεͷૢ࡞ͳͲEP4PNFUIJOH ϒϥβ͕εΫϩʔϧҐஔΛมߋϒϥβͷεΫϩʔϧϦεφʔͷӨڹΛड͚ͳ͍
©2018 Yusuke Hirao·ͱΊ
©2018 Yusuke Hirao·ͱΊຊʹͦͷίʔυ͕ඞཁͳͷ͔ࠓҰݟ͍͍ͭͬͯ͢Δख๏͕࠷దղͰͳ͍͔ϒϥβਐԽ͍ͯ͠ΔͷͰ৽͍͠"1*Λظͯ͠ΈΔ
yusukehirao
jfg956
yuyakakizaki08
whywaita
kadogen_0527
takashi1029
nenonaninu
sinsoku
goyoki
mmclsntr
iselegant
norimuraz
ryomaru0825
andyhume
bryan
destraynor
lynnandtonic
paigeccino
frogandcode
sachag
addyosmani
chriscoyier
mojombo
erikaheidi
samlambert