WWD Japanã®ã¦ã§ããµã¤ãããªãã¥ã¼ã¢ã«ãã¦ãã¹ãããªããè¦ãããããªå°è±¡ã®ãã®ã«å¤ãã£ãããããå®éã®ã¨ããè¦ãããã¯è¦ãããã ãã§ãããã²ã¼ã·ã§ã³ãã¯ãªãã¯ãã¦ãè¦å½éãã®ã¿ãã«åãæ¿ãã£ããããã¥ã¼ã¹ä¸è¦§ãããã¥ã¼ã¹ãã¯ãªãã¯ããããè¦ç´ãã¼ã¸ã¸ç§»åããã ãã§ãæ¬æã¸ã¯ããä¸åº¦ã¯ãªãã¯ããªããã°ãªããªãã£ãããããä¸ã§ãã²ã©ãã®ãMobile Safariã§ã®é²è¦§ã ã ãã®ã¦ã§ããµã¤ãã§ã¯ã¹ã¯ãã¼ã«ãã»ã¼èªåã§å¶å¾¡ãããã¨ãã¦ããããã常ã«ãã®ããã«Mobile Safariã®URLãã¼ã¨ãã¼ã«ãã¼ãä¸ä¸ã«ãããã表示ããç¶ããããã®ä¸ãæä¸ç«¯ã«ãã´ã¨ã°ãã¼ãã«ã»ããã²ã¼ã·ã§ã³ãæä¸ç«¯ã«åºåãããããåºå®ä½ç½®ã§ããã®ã§ãã³ã³ãã³ãã®é åãããªãå¶éããã¦ãããiPhone 5SãSEã©ããã6+ã7+ã§ãããè´å½çãªã®ã§ã¯ãªããã¨æããããçãã ã ã¨ã«ããææ¸ãèªã¾ãããã¨ã
Intro ã¹ã¯ãã¼ã«ã«ãã DOM è¦ç´ ã®åºç¾ãªã©ãå¹çããæ¤ç¥ãããããæ°ãã Intersection Observer ã¨ãã API ã追å ãããã ãã® API ã®ä½¿ãæ¹ã¨ãæ¬ãµã¤ãã¸ã®é©ç¨ã«ã¤ãã¦è¨ãã è¦ç´ 交差(intersection)ã®æ¤åº ãã¼ã¸ãã¹ã¯ãã¼ã«ãã¦ããéç¨ã§ãç¹å®ã® DOM ãç»é¢ã«åºç¾ãããã¨ãããã¯ãããã±ã¼ã¹ãããã 代表ä¾ã¯ ç»åã®é 延èªã¿è¾¼ã¿ ã§ãããåæãã¼ãã§ã¯ç»åã®åå¾ãè¡ããã¹ã¯ãã¼ã«ãã¦ããéç¨ã§é 次åå¾ããææ³ã§ããã ç¹ã«ç»åã®å¤ããã¼ã¸ã§ã¯è¡¨ç¤ºã«å¿ è¦ãªãªã½ã¼ã¹åå¾ã®ã¿ã«æé©åã§ããåæç»é¢è¡¨ç¤ºãªã©ã§ã¯å¹æã大ããã¨ãããã ãããå®è£ ããã®ã«å¿ è¦ãªã®ã¯ãã <img> è¦ç´ ãåºç¾ãã¦ãããã©ãããã§ããããæ¬è³ªçã«ã¯ãç»é¢å¤ã«ãã£ã <img> ã viewport ã¨äº¤å·®ãããããåå¾ãããã¨ã«ãªãã ã¤ã¾ãã è¦ç´ åºç¾ã®åå¾
JavaScriptï¼ã¨ãããDOM? CSSOM?ï¼ã«ã¯ getBoundingClientRect ã¨ãã便å©ãªã¡ã½ãããç¨æããã¦ãã¾ããããã使ãã°ï¼ããè¦ç´ ã®viewportä¸ã®åº§æ¨ï¼ã¤ã¾ããã©ã¦ã¶ç»é¢ã®å·¦ä¸ãåç¹ã¨ãã座æ¨ä¸ã§ã®è¦ç´ ã®ä½ç½®ãåå¾ãããã¨ãã§ãã¾ããããã¾ã§ã¯ d:id:gifnksm:20100729:1280429284 ã®getOffseté¢æ°ã®ããã«ï¼offsetParentã辿ã£ã¦ããæ¹æ³ã§ä½ç½®ãåå¾ãã¦ãã¾ãããã¾ã親è¦ç´ ã« position: fixed; ãæå®ããã¦ããå ´åãªã©ãèæ ®ããã¨ï¼d:id:gifnksm:20090506:1241630603 ã®ããã«é常ã«é·ãé¢æ°ãæ¸ããããå¾ãªãã£ãããã¦ï¼ä½ãã¨é¢åã§ãããããã¦ï¼ã§ããã ãæ¬é ãããå¦çã§ãããè¤éãªé¢æ°ãæ¸ãã¦ãï¼æçµçã«ä»»æã®ææ¸ã«å¯¾ãã¦æ£ããåä½ãããçµå±ãããããã¾ãã
ä¸ã£ç«¯ããã°ã©ãã¼ã®ããããã¤ãã¤ãã¨ã çæ´»ããä»äºã®ãã¼ãããããæ°ã«ãªã£ããã¥ã¼ã¹ãªã©ãæ¸ãã¦ããã¾ãã iPhoneã«scrollTopã¯ç¡ãã 代ããã«ãpageYOffsetãããã ä¸çªä¸ã¾ã§æ¥ãå ´åã«ä½ãå¦çãããããå ´åãscrollTopãç¡ãiPhoneã¯pageYOffsetã使ç¨ãããããªãã ãã ãpageYOffsetã ãã§ã¯ä¸ååã pageYOffsetã¯ç¾å¨ã®ç»é¢ã®ä¸çªä¸ã®ç¸¦ä½ç½®ãå ¨ä½ã®ã©ã®ä½ç½®ã¾ã§ã¹ã¯ãã¼ã«ãããããããã ããä¸çªä¸ã«æ¥ããã©ãããããããªãã ãªã®ã§ã window.innerHeight ã足ãã¦ããäºã§ç»é¢ä¸ã®ä½ç½®ãåå¾ã§ããã //ç»é¢ä¸ã®ä½ç½®åå¾ var bottomPos = window.pageYOffset + window.innerHeight; //ã¹ã¯ãã¼ã«ã§ãã縦ã®é·ãåå¾ var max = documen
â» x, y ã¯ç¾å¨ä½ç½®ãåºæºã¨ãã ç¸å¯¾ãªãã»ããã â» x, y ã§ã¹ã¯ãã¼ã«ä½ç½®ã®MAX(MIN)ãè¶ ããå ´åã¯éçã¾ã§ç§»åããã
Memo ã§ãã ã¹ãããã¿ãã¬ããå°ç¨ãµã¤ãã 㨠jQuery 使ããªãã¦ãä½ã¨ããªãããã ã§ãããã£ããjQueryã«èº«ãå¿ã奪ããã¦ãã¾ãèå¿ãªãã¨ãªã®ã«åãããªããã¨ãå¤ããã Scroll ã® y ä½ç½®ããããªãã¨ã®ã²ã¨ã¤ã ã¾ããã¤ãã® stackoverflow ã§çããè¦ã¤ããã JavaScript get window X/Y position for scroll var doc = document.documentElement; var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
ãã¼ã¿åæããå°ãåºãããã¤ã³ãµã¤ãç¡ãã«AIï¼äººå·¥ç¥è½ï¼ã®æ´»ç¨ã¯å§ã¾ãã¾ãããç§ãã¡ã¯ãåæ¥çç¥èã¨ãã¼ã¿ã»ã¢ããªãã£ã¯ã¹æè¡ãé§ä½¿ããã¼ã¿ããªãã³çµå¶ãå¼·åã«æ¯æ´ãã¾ãã ãã¼ã¿ãã¢ããªãã£ã¯ã¹ãAIã¯ä¼æ¥ã«ã¨ã£ã¦ç«¶åä»ç¤¾ã¨ã®å·®å¥åãå³ããã¤ã¦ãªãã»ã©å¤§ããªè¦å ã«ãªã£ã¦ãã¾ããä»æ¥ã®çµå¶å¹¹é¨ãå¹çãåä¸ããªããæ°ããªåçæºãéæããæ°ãããã¸ãã¹ã¢ãã«ãã¿ã¤ã ãªã¼ã«æ§ç¯ããæ¹æ³ã模索ããä¸ã価å¤ãçã¿åºãæé·ãç¶ããä¼æ¥ã«ã¯ããã¼ã¿æ´»ç¨ãã¨ããå ±éé ãããã¾ããç§ãã¡ã¯ãç¡æ°ã®ãã¼ã¿ããä¼æ¥ã«ã¨ã£ã¦æ¬å½ã«å¿ è¦ãªãã¼ã¿ãæ´»ç¨ããããã®æ¹æ³ãç¥ã£ã¦ãã¾ãã å°æ¥ãè¦æ®ãããªãã¬ã¼ã·ã§ã³ä½å¶ãåãã¦ããä¼æ¥ã®åæ°ä»¥ä¸ï¼52ï¼ ï¼ã¯ããã§ã«ãã¼ã¿ã¨ã¢ããªãã£ã¯ã¹ã大è¦æ¨¡ã«æ´»ç¨ãã¦ãã¾ãããã¼ã¿ã¨AIã«é¢ããåãçµã¿ããã¸ãã¹æ¦ç¥ã«æ²¿ã£ã¦å®æ½ãããã¨ã§æè³å©ççãè¿ éã«æ大åããæçµçã«ã¯AIãã
大ããé¢ä¿ã® jQuery ã®ãã¤ãã£ãæ¸ãæãã®ç´¹ä»ã§ãã 詳ãã㯠è±jQuery ãã®1 ãã覧ãã ããã heightãwidth é¢é£ã ãã§ããããªãã«è²ããªç¨®é¡ãããã®ã§æ´çãã¤ã¤è¡ãã¾ããheight()ãwidth() ã«é¢ãã¦ã¯ãã®ãã¼ã¸ã§ã¯ãè¨å®ãã®ã¿æ±ãã¾ããåå¾ããå ´åã¯è²ã ããããã話ãããã®ã§ã次åã®è¨äºã§è©³ããå ´åãåãã¦èª¬æãã¾ãã .height()ï¼é«ãè¨å®ï¼ $("#main").height(50)æ¸ãæã JavaScriptdocument.getElementById("main").style.height = "50px".css() ã¨èãæ¹ã¯åãã§ãããé«ãããè¨å®ããã®ã§ style ã使ãã¾ããJavaScript ã®æ¹ã¯ "50px" ã¨ãpxãã®åä½ãå ¥ã£ã¦ãããã¨ã«æ°ãã¤ãã¾ããjQuery ã®æ¹ã¯ãã£ã¦ãç¡ãã¦ãèªåã§ãã£ã¦
ä»æ´ã ãã©ãèªåã¯ãã©ã©ãã¯ã¹ãã¶ã¤ã³ã好ãã§ãã 好ããªãã®ãæµè¡ã£ã¦ãã¨è¦ãæ©ä¼ãå¤ããªã£ã¦ãã¤ãã¤ã§ããããã¨ã£ã¦ãããããã ã¡ãªã¿ã«ãã©ã©ãã¯ã¹ãå°å ¥ããæã«ã¯jQueryãã©ã°ã¤ã³ã使ãã¨ãã¡ããã¡ãç°¡åã«å°å ¥ã§ããã skrollrã¨ãã ã§ããã£ã±ãèªåã®æã§å®è£ ãããæããã ãªãã§ãjQueryã«é ¼ãã®ã¯ã¹ãã¼ããããªããã ã¨ããããã§ãããããã¥ã¢JSã§ã³ã¼ãæ¸ãã¦ã¿ãããã¹ã¯ãã¼ã«éãåå¾ãããã¨ããã§ã¤ã¾ã¥ããã®ã§ã¡ã¢ãåç½®ããªãããã ã¹ã¯ãã¼ã«éãåå¾ããã«ã¯ ã¹ã¯ãã¼ã«éãåå¾ããã¡ã½ããã¯ããã¤ãåå¨ããã document.body.scrollTop window.pageYOffset window.scrollY document.documentElement.scrollTop ãããããã©ã¦ã¶ãDOCTYPEã§ã®ã¢ã¼ãæå®(å¾æ¹äºæã¨ããã
ããªãç¡é§ããã£ãã®ã§ä¿®æ£ 2014/09/24 MDNã«è¨è¼ããã¦ããã®ã¯äºæã¢ã¼ãã«å¯¾å¿ãã¦ããªãã£ãã®ã§ã åºæ¬çã«ä»¥ä¸ã®ããã«ãªãããCSS次第ã§å¤ããã 詳ããã¯ãã¹ã¯ãã¼ã«ä½ç½®ãåããªã htmlãbodyã«overflowãæå®ããã¨ãã¯æ³¨æãåç § browser page-scrolled Quirks Mode body.scrollTop IE8 html.scrollTop IE9 html.scrollTop, pageYOffset Webkit body.scrollTop, pageYOffset Firefox html.scrollTop, pageYOffset 追è¨ï¼ãæè¿Google Chromeãhtml.scrollTopã§ã¹ã¯ãã¼ã«éãè¿ãããã«ãªã£ããããããå é¨çã«ã¯body.scrollTopãè¿ãã¦ããã ãã®æ¨¡æ§ãä½ã«ãããpageYO
Intro DOM ã®ã¤ãã³ããªã¹ãã®ä»æ§ã« Passive Event Listeners ã¨ãããªãã·ã§ã³ã追å ãããã ãã®ãªãã·ã§ã³ã¯ã主ã«ã¢ãã¤ã«ãªã©ã§ã®ã¹ã¯ãã¼ã«ã®è©°ã¾ã(Scroll Junk) ã解決ããããã«å°å ¥ããããã®ã§ããã ä»åã¯ããã®ä»æ§ã解決ããåé¡ã¨ãæ¬ãµã¤ãã¸ã®é©ç¨ã解説ããã Passive Event Listeners Spec Scroll Event ã® PreventDefault() ç»é¢ã®ã¹ã¯ãã¼ã«ã«åãããã¤ã³ã¿ã©ã¯ã·ã§ã³ãå®è£ ããå ´åã Scroll Event ã«ã¤ãã³ããªã¹ããç»é²ããã å ¸åçãªä¾ã§ã¯ touchstart ã touchend ãããã¯ãããã®ä¸ã§ DOM ã®æä½ãªã©ãå®æ½ãããªã©ãããã å ´åã«ãã£ã¦ã¯ã¤ãã³ããªã¹ãå 㧠preventDefault() ãå¼ã¶ãã¨ã§ãã¹ã¯ãã¼ã«ãã®ãã®ãæ¢ãããã¨ãã§ããã
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}