{"id":8495,"date":"2019-02-22T01:04:12","date_gmt":"2019-02-21T17:04:12","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8495"},"modified":"2024-08-01T10:59:42","modified_gmt":"2024-08-01T02:59:42","slug":"document-scrollingelement","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2019\/02\/document-scrollingelement\/","title":{"rendered":"\u4f7f\u7528document.scrollingElement\u63a7\u5236\u7a97\u4f53\u6eda\u52a8\u9ad8\u5ea6"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8495\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8495<\/a><br \/>\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4e2a\u4eba\u7f51\u7ad9\u65e0\u9700\u6388\u6743\uff0c\u53ea\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\u5373\u53ef\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<br \/>\n<script>window.wxShareImgUrl = 'https:\/\/www.zhangxinxu.com\/study\/image\/share\/201902-mouse.png';<\/script><\/p>\n<h3>\u4e00\u3001\u4e3a\u4f55\u6709document.<wbr>scrolling<wbr>Element\uff1f<\/h3>\n<p>\u5982\u679c\u53ea\u662f\u4e3a\u4e86\u83b7\u53d6\u5f53\u524d\u7f51\u9875\u7a97\u4f53\u7684\u6eda\u52a8\u9ad8\u5ea6\uff0c\u76f4\u63a5\u4f7f\u7528<code>window.pageYOffset<\/code>\u5c31\u53ef\u4ee5\u4e86\uff08IE9+\uff09\uff0c\u684c\u9762\u7aef\u548c\u79fb\u52a8\u7aef\u90fd\u652f\u6301\u3002<\/p>\n<p>\u4f46\u662f<code>window.pageYOffset<\/code>\u662f\u4e00\u4e2a\u53ea\u8bfb\u5c5e\u6027\uff0c\u6211\u4eec\u65e0\u6cd5\u7528\u6765\u8bbe\u7f6e\u7a97\u4f53\u7684\u6eda\u52a8\u9ad8\u5ea6\uff0c\u6b64\u65f6\uff0c\u5c31\u8981\u627e\u5230\u5bf9\u5e94\u7684\u6eda\u52a8\u5143\u7d20\uff0c\u901a\u8fc7\u8bbe\u7f6e<code>scrollTop<\/code>\u503c\u6765\u6539\u53d8\u7a97\u4f53\u7684\u6eda\u52a8\u4f4d\u7f6e\u3002<\/p>\n<p>\u7136\u540e\uff0c\u684c\u9762\u7aef\u548c\u79fb\u52a8\u7aef\u7684\u7a97\u4f53\u6eda\u52a8\u5143\u7d20\u662f\u4e0d\u4e00\u6837\u7684\uff0c\u5982\u4e0b\u6d4b\u8bd5\u4ee3\u7801\uff1a<\/p>\n<pre>document.documentElement.scrollTop;\r\ndocument.body.scrollTop;<\/pre>\n<p>\u5927\u5bb6\u6709\u5174\u8da3\u4e5f\u53ef\u4ee5\u626b\u4e0b\u9762\u4e8c\u7ef4\u7801\u81ea\u5df1\u6d4b\u8bd5\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201902\/qrcode-st.png\" width=\"150\" height=\"150\" alt=\"\u6eda\u52a8\u9ad8\u5ea6\u4e8c\u7ef4\u7801\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6216\u8005\u76f4\u63a5\u8bbf\u95ee\u8fd9\u4e2a\u9875\u9762\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/201902\/document-scrolltop.html\" rel=\"noopener\" target=\"_blank\">\u7a97\u4f53\u6eda\u52a8\u9ad8\u5ea6\u6240\u5728\u5bb9\u5668\u6d4b\u8bd5demo<\/a><\/p>\n<p>\u7ed3\u679c\u5728PC\u4e0a\u662f\u8fd9\u6837\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201902\/2019-02-22_002936.png\" width=\"292\" height=\"417\" alt=\"PC\u4e0a\u6eda\u52a8\u9ad8\u5ea6\u8bc6\u522b\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u800c\u5728\u624b\u673a\u4e0a\u5219\u662f\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201902\/20190222003318.png\" width=\"375\" height=\"667\" alt=\"\u6eda\u52a8\u9ad8\u5ea6\u83b7\u53d6\u79fb\u52a8\u7aef\u622a\u56fe\" class=\"alignnone imgpad size-medium\" \/><\/p>\n<ul>\n<li>\u684c\u9762\u7aef\u6d4f\u89c8\u5668<code>document.body.scrollTop<\/code>\u4e00\u76f4\u662f0\uff0c\u8bf4\u660e\u684c\u9762\u7aef\u6eda\u52a8\u5143\u7d20\u662f<code>document.documentElement<\/code>\uff1b<\/li>\n<li>\u79fb\u52a8\u7aef<code>document.documentElement.scrollTop<\/code>\u4e00\u76f4\u662f0\uff0c\u8bf4\u660e\u79fb\u52a8\u7aef\u6eda\u52a8\u5143\u7d20\u662f<code>document.body<\/code>\uff1b<\/li>\n<\/ul>\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u5728\u4e0d\u540c\u7684\u5e73\u53f0\u4e0a\uff0c\u6eda\u52a8\u5143\u7d20\u662f\u4e0d\u4e00\u6837\u7684\uff0c\u4e8e\u662f\u5c31\u6709\u517c\u5bb9\u6027\u95ee\u9898\u3002<\/p>\n<p><strong>\u66f4\u65b0\u4e8e2024-08-01<\/strong><br \/>\n\u73b0\u5728Android\u3001iOS\u4e0b\u7684\u9875\u9762\u6eda\u52a8\u5bb9\u5668\u4e5f\u53d8\u6210html\u5143\u7d20\u4e86\uff0c\u6b64\u5dee\u5f02\u76ee\u524d\u73b0\u5728\u4ec5\u4f1a\u5728\u602a\u5f02\u6a21\u5f0f\u4e0b\u51fa\u73b0\u3002<\/p>\n<p>\u4f8b\u5982\u8981\u5b9e\u73b0\u4e00\u4e2a\u8fd4\u56de\u9876\u90e8\u6548\u679c\uff0c\u6211\u4eec\u76ee\u524d\u7684\u505a\u6cd5\u662f\u4e0b\u9762\u4e24\u4e2a\u8bed\u53e5\u5e76\u884c\uff1a<\/p>\n<pre>document.documentElement.scrollTop = 0;\r\ndocument.body.scrollTop = 0;<\/pre>\n<p>\u5c31\u663e\u5f97\u5f88\u5570\u55e6\uff0c\u6b63\u662f\u7531\u4e8e\u8fd9\u79cd\u73b0\u72b6\uff0c<code>document.scrollingElement<\/code>\u8fd9\u4e2a\u5c5e\u6027\u624d\u5e94\u8fd0\u800c\u751f\uff0c\u76f4\u63a5\u52a8\u6001\u8bc6\u522b\u6eda\u52a8\u5bb9\u5668\u3002<\/p>\n<h4>document.scrollingElement\u4e00\u7edf\u6c5f\u6e56<\/h4>\n<ul>\n<li>\u5728\u684c\u9762\u7aef<code>document.scrollingElement<\/code>\u5c31\u662f<code>document.documentElement<\/code>\uff1b<\/li>\n<li>\u5728\u79fb\u52a8\u7aef<code>document.scrollingElement<\/code>\u5c31\u662f<code>document.body<\/code>\u3002<\/li>\n<\/ul>\n<p>\u53ef\u4ee5\u81ea\u52a8\u8bc6\u522b\u4e0d\u540c\u5e73\u53f0\u4e0a\u7684\u6eda\u52a8\u5bb9\u5668\u3002<\/p>\n<p>\u4e8e\u662f\u5f53\u6211\u4eec\u5e0c\u671b\u9875\u9762\u6eda\u52a8\u5b9a\u4f4d\u5230\u5177\u4f53\u4f4d\u7f6e\u7684\u65f6\u5019\uff0c\u5982400\u50cf\u7d20\uff0c\u76f4\u63a5\u4e00\u884c\u4ee3\u7801\u5c31\u53ef\u4ee5\u641e\u5b9a\u4e86\uff1a<\/p>\n<pre>document.scrollingElement.scrollTop = 400;<\/pre>\n<p>\u8bed\u4e49\u66f4\u597d\uff0c\u4ee3\u7801\u66f4\u7cbe\u7b80\uff0c\u8001\u65b9\u6cd5\u53ef\u4ee5\u76f4\u63a5say goodbye\u4e86\uff01<\/p>\n<p>\u5927\u5bb6\u53ef\u4ee5\u626b\u4e0b\u9762\u4e8c\u7ef4\u7801\u81ea\u5df1\u6d4b\u8bd5\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201902\/qrcode-si-e.png\" width=\"150\" height=\"150\" alt=\"\u6eda\u52a8\u9ad8\u5ea6\u4e8c\u7ef4\u7801\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6216\u8005\u76f4\u63a5\u8bbf\u95ee\u8fd9\u4e2a\u9875\u9762\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/201902\/scrollingelement.html\" rel=\"noopener\" target=\"_blank\">document.scrollingElement\u6d4b\u8bd5demo<\/a><\/p>\n<p>\u70b9\u51fb\u6309\u94ae\u53ef\u4ee5\u770b\u5230\u65e0\u8bbaPC\u8fd8\u662fMobile\u8bbf\u95ee\u90fd\u6eda\u52a8\u5230\u4e86400\u50cf\u7d20\u4f4d\u7f6e\u3002<\/p>\n<p>\u540c\u65f6<code>document.scrollingElement.tagName<\/code>\u8f93\u51fa\u7684\u503c\u5206\u522b\u662f<code>HTML<\/code>\uff08\u684c\u9762\u6d4f\u89c8\u5668\uff09\uff0c\u548c<code>BODY<\/code>\uff08\u79fb\u52a8\u7aef\u6d4f\u89c8\u5668\uff0c\u5982\u5fae\u4fe1\u4e2d\uff09\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201902\/20190222005054.jpg\" width=\"540\" height=\"512\" alt=\"\u5b9e\u666f\u62cd\u6444\u8f93\u51fa\u7ed3\u679c\" class=\"alignnone size-medium\" \/><\/p>\n<h4>\u517c\u5bb9\u6027<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201902\/2019-02-22_002041.png\" width=\"638\" height=\"178\" alt=\"document.scrollingElement\u517c\u5bb9\u6027\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u8fd8\u662f\u76f8\u5f53\u4e0d\u9519\u7684\uff0c\u79fb\u52a8\u7aef\u653e\u5fc3\u4f7f\u7528\uff0cAndroid 5\u4ee5\u4e0a\u90fd\u652f\u6301\u3002\u4e0d\u8fc7IE\u6d4f\u89c8\u5668\u62d6\u540e\u817f\u4e86\u3002<\/p>\n<p>\u5982\u679c\u4e0d\u653e\u5fc3\u4e00\u4e9b\u8001\u65e7\u8bbe\u5907\uff0c\u53ef\u4ee5\u4f7f\u7528Polyfill\uff1a<a href=\"https:\/\/github.com\/mathiasbynens\/document.scrollingElement\" rel=\"noopener\" target=\"_blank\">https:\/\/github.com\/mathiasbynens\/document.scrollingElement<\/a><\/p>\n<p>\u5f15\u5165\u4e00\u4e2ascrollingelement.js\u5c31\u53ef\u4ee5\u4e86\uff0c\u5f88\u5c0f\u7684\u4ee3\u7801\u7247\u6bb5\uff0c\u53ef\u4ee5\u517c\u5bb9\u5230\u4e00\u4e0b\u7248\u672c\uff1a<\/p>\n<pre>&lt;script src=\"scrollingelement.js\"&gt;&lt;\/script&gt;<\/pre>\n<ul>\n<li>Chrome<\/li>\n<li>Opera 11.64+<\/li>\n<li>Firefox 3.5+<\/li>\n<li>Internet Explorer 8+<\/li>\n<li>Safari 8+<\/li>\n<\/ul>\n<h3>\u4e8c\u3001\u7ed3\u675f\u8bed<\/h3>\n<p>\u65e5\u540e\u518d\u9047\u5230\u63a7\u5236\u7a97\u4f53\u6eda\u52a8\u9ad8\u5ea6\u7684\u9700\u6c42\uff0c\u4e0d\u8981\u72b9\u8c6b\uff0cdocument.scrollingElement\u7528\u8d77\u6765\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/1f4aa.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8495\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8495<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4ecb\u7ecd\u4e00\u4e2a\u66f4\u52a0\u517c\u5bb9\u3001\u66f4\u52a0\u6807\u51c6\u7684\u8bbe\u7f6e\u7a97\u4f53\u6eda\u52a8\u9ad8\u5ea6\u7684\u65b9\u6cd5\uff0c\u90a3\u5c31\u662fdocument.scrollingElement\uff0c\u517c\u5bb9\u6027\u8db3\u77e3\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u5e94\u7528\u3002JS\u57fa\u7840API\uff0c\u4eba\u4eba\u5fc5\u987b\u4e86\u89e3\u7684\u7279\u6027\uff0c\u5b66\u5230\u5c31\u662f\u8d5a\u5230\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1284],"tags":[215,870,1273,1401,1327,1414,124],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8495"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=8495"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8495\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=8495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=8495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=8495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}