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