[{"data":1,"prerenderedAt":328},["ShallowReactive",2],{"blog-\u002Fblog\u002Fget_window_properties":3},{"id":4,"title":5,"body":6,"category":315,"cover":316,"csdn":316,"date":317,"description":5,"draft":318,"extension":319,"meta":320,"navigation":321,"path":322,"seo":323,"stem":324,"tags":325,"updated":316,"__hash__":327},"blog\u002Fblog\u002Fget_window_properties.md","获取窗口属性",{"type":7,"value":8,"toc":313},"minimark",[9,14,38,117,121,271,275,279,287,302,306,309],[10,11,13],"h1",{"id":12},"_1-滚动条","1. 滚动条",[15,16,21],"pre",{"className":17,"code":18,"language":19,"meta":20,"style":20},"language-js shiki shiki-themes github-dark","\u002F\u002F 兼容\ndocument.body.scrollLeft + document.documentElement.scrollLeft;\n","js","",[22,23,24,32],"code",{"__ignoreMap":20},[25,26,29],"span",{"class":27,"line":28},"line",1,[25,30,31],{},"\u002F\u002F 兼容\n",[25,33,35],{"class":27,"line":34},2,[25,36,37],{},"document.body.scrollLeft + document.documentElement.scrollLeft;\n",[15,39,41],{"className":17,"code":40,"language":19,"meta":20,"style":20},"function getScrollOffset() {\n  if (window.pageXOffset) {\n    return {\n      x: window.pageXOffset,\n      y: window.pageYOffset,\n    };\n  } else {\n    return {\n      x: document.body.scrollLeft + document.documentElement.scrollLeft,\n      y: document.body.scrollTop + document.documentElement.scrollTop,\n    };\n  }\n}\n",[22,42,43,48,53,59,65,71,77,83,88,94,100,105,111],{"__ignoreMap":20},[25,44,45],{"class":27,"line":28},[25,46,47],{},"function getScrollOffset() {\n",[25,49,50],{"class":27,"line":34},[25,51,52],{},"  if (window.pageXOffset) {\n",[25,54,56],{"class":27,"line":55},3,[25,57,58],{},"    return {\n",[25,60,62],{"class":27,"line":61},4,[25,63,64],{},"      x: window.pageXOffset,\n",[25,66,68],{"class":27,"line":67},5,[25,69,70],{},"      y: window.pageYOffset,\n",[25,72,74],{"class":27,"line":73},6,[25,75,76],{},"    };\n",[25,78,80],{"class":27,"line":79},7,[25,81,82],{},"  } else {\n",[25,84,86],{"class":27,"line":85},8,[25,87,58],{},[25,89,91],{"class":27,"line":90},9,[25,92,93],{},"      x: document.body.scrollLeft + document.documentElement.scrollLeft,\n",[25,95,97],{"class":27,"line":96},10,[25,98,99],{},"      y: document.body.scrollTop + document.documentElement.scrollTop,\n",[25,101,103],{"class":27,"line":102},11,[25,104,76],{},[25,106,108],{"class":27,"line":107},12,[25,109,110],{},"  }\n",[25,112,114],{"class":27,"line":113},13,[25,115,116],{},"}\n",[10,118,120],{"id":119},"_2-可视区窗口的尺寸","2. 可视区窗口的尺寸",[15,122,126],{"className":123,"code":124,"language":125,"meta":20,"style":20},"language-javascript shiki shiki-themes github-dark","function getViewportOffset() {\n  if (window.innnerWidth) {\n    return {\n      w: window.innerWidth,\n      h: window.innerHeight,\n    };\n  } else {\n    if (document.compatMode === \"BackCompat\") {\n      return {\n        w: document.body.clientWidth,\n        h: document.body.clientHeight,\n      };\n    } else {\n      return {\n        w: document.documentElement.clientWidth,\n        h: document.documentElement.clientHeight,\n      };\n    }\n  }\n}\n","javascript",[22,127,128,142,150,158,163,168,172,182,200,207,212,217,222,231,238,244,250,255,261,266],{"__ignoreMap":20},[25,129,130,134,138],{"class":27,"line":28},[25,131,133],{"class":132},"snl16","function",[25,135,137],{"class":136},"svObZ"," getViewportOffset",[25,139,141],{"class":140},"s95oV","() {\n",[25,143,144,147],{"class":27,"line":34},[25,145,146],{"class":132},"  if",[25,148,149],{"class":140}," (window.innnerWidth) {\n",[25,151,152,155],{"class":27,"line":55},[25,153,154],{"class":132},"    return",[25,156,157],{"class":140}," {\n",[25,159,160],{"class":27,"line":61},[25,161,162],{"class":140},"      w: window.innerWidth,\n",[25,164,165],{"class":27,"line":67},[25,166,167],{"class":140},"      h: window.innerHeight,\n",[25,169,170],{"class":27,"line":73},[25,171,76],{"class":140},[25,173,174,177,180],{"class":27,"line":79},[25,175,176],{"class":140},"  } ",[25,178,179],{"class":132},"else",[25,181,157],{"class":140},[25,183,184,187,190,193,197],{"class":27,"line":85},[25,185,186],{"class":132},"    if",[25,188,189],{"class":140}," (document.compatMode ",[25,191,192],{"class":132},"===",[25,194,196],{"class":195},"sU2Wk"," \"BackCompat\"",[25,198,199],{"class":140},") {\n",[25,201,202,205],{"class":27,"line":90},[25,203,204],{"class":132},"      return",[25,206,157],{"class":140},[25,208,209],{"class":27,"line":96},[25,210,211],{"class":140},"        w: document.body.clientWidth,\n",[25,213,214],{"class":27,"line":102},[25,215,216],{"class":140},"        h: document.body.clientHeight,\n",[25,218,219],{"class":27,"line":107},[25,220,221],{"class":140},"      };\n",[25,223,224,227,229],{"class":27,"line":113},[25,225,226],{"class":140},"    } ",[25,228,179],{"class":132},[25,230,157],{"class":140},[25,232,234,236],{"class":27,"line":233},14,[25,235,204],{"class":132},[25,237,157],{"class":140},[25,239,241],{"class":27,"line":240},15,[25,242,243],{"class":140},"        w: document.documentElement.clientWidth,\n",[25,245,247],{"class":27,"line":246},16,[25,248,249],{"class":140},"        h: document.documentElement.clientHeight,\n",[25,251,253],{"class":27,"line":252},17,[25,254,221],{"class":140},[25,256,258],{"class":27,"line":257},18,[25,259,260],{"class":140},"    }\n",[25,262,264],{"class":27,"line":263},19,[25,265,110],{"class":140},[25,267,269],{"class":27,"line":268},20,[25,270,116],{"class":140},[10,272,274],{"id":273},"_3-查看元素几何属性","3. 查看元素几何属性",[276,277,278],"p",{},"domEle.getBoundingClientRect(); \u002F\u002F 舍弃 静态 兼容性好，ie无hw",[15,280,285],{"className":281,"code":283,"language":284},[282],"language-text","dom.offsetHeight  dom.offsetWidth \u002F\u002F 视觉上的尺寸，包含padding\ndom.offsetLeft dom.offsetTop \u002F\u002F 距离父级 \u002F 文档\n\ndom.offsetParent \u002F\u002F 有定位的父级\n","text",[22,286,283],{"__ignoreMap":20},[15,288,290],{"className":123,"code":289,"language":125,"meta":20,"style":20},"function getElementPosition() {}\n",[22,291,292],{"__ignoreMap":20},[25,293,294,296,299],{"class":27,"line":28},[25,295,133],{"class":132},[25,297,298],{"class":136}," getElementPosition",[25,300,301],{"class":140},"() {}\n",[10,303,305],{"id":304},"_4-让滚动条滚动","4. 让滚动条滚动",[276,307,308],{},"window上有三个方法\nscroll(0, 10); scrollTo(0, 10); \u002F\u002F 一样 x定位至10\nscrollBy(0, 10);       \u002F\u002F 向x滚动 10距离\n\u002F\u002F 小说自动阅读",[310,311,312],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":20,"searchDepth":34,"depth":34,"links":314},[],"前端",null,"2020-01-10",false,"md",{},true,"\u002Fblog\u002Fget_window_properties",{"title":5,"description":5},"blog\u002Fget_window_properties",[326],"window","s3wPte4K9dwb5lQMu7H_9WV2-VPdRsfJnzjv_Q8nRGA",1780076048992]