{"id":2918,"date":"2020-04-26T20:32:20","date_gmt":"2020-04-26T12:32:20","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2918"},"modified":"2026-08-18T12:35:30","modified_gmt":"2026-08-18T04:35:30","slug":"%e4%b8%80%e4%b8%aa%e7%ae%80%e6%b4%81%e3%80%81%e6%9c%89%e8%b6%a3%e7%9a%84%e6%97%a0%e9%99%90%e4%b8%8b%e6%8b%89%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2918","title":{"rendered":"\u4e00\u4e2a\u7b80\u6d01\u3001\u6709\u8da3\u7684\u65e0\u9650\u4e0b\u62c9\u65b9\u6848"},"content":{"rendered":"<section id=\"wenyan\" style=\"font-family: system-ui, 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Symbol', 'Noto Sans', Roboto, sans-serif; line-height: 1.75; font-size: 16px; color: #000000; caret-color: #000000;\" data-provider=\"WenYan\">\n<p style=\"margin: 1em 0px;\">\u957f\u5217\u8868\u548c\u65e0\u9650\u4e0b\u62c9\u662f\u524d\u7aef\u8001\u751f\u5e38\u8c08\u3002\u672c\u6587\u4ecb\u7ecd\u4e00\u79cd<strong style=\"color: #4870ac;\">\u7b80\u6d01\u3001\u5de7\u5999\u3001\u9ad8\u6548<\/strong>\u7684\u505a\u6cd5\uff1a\u53ea\u6e32\u67d3\u53ef\u89c6\u533a\u57df\u9644\u8fd1\u7684 DOM\uff0c\u6eda\u52a8\u65f6\u4e3b\u8981\u6539\u5916\u5c42\u5bb9\u5668\u7684 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">padding<\/code>\u3002\u4e24\u4e2a\u8981\u7d20\u662f <strong style=\"color: #4870ac;\">Intersection Observer<\/strong> \u548c <strong style=\"color: #4870ac;\">padding<\/strong>\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume3.gif\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2919\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume3.gif\" alt=\"resume3\" width=\"1113\" height=\"800\" srcset=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume3.gif 1113w, https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume3-140x100.gif 140w\" sizes=\"(max-width: 1113px) 100vw, 1113px\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u4ece\u56fe\u91cc\u80fd\u770b\u51fa\u4e24\u70b9\uff1a\u53ea\u6e32\u67d3\u53ef\u89c6\u533a\u57df\u7684\u90e8\u5206 DOM\uff1b\u6eda\u52a8\u8fc7\u7a0b\u4e2d\u5916\u5c42 padding \u5728\u53d8\u3002\u524d\u8005\u597d\u7406\u89e3\u2014\u2014\u4e0d\u53ef\u80fd\u628a\u65e0\u9650\u5217\u8868\u5168\u90e8\u6e32\u67d3\uff1b\u540e\u8005\u662f\u672c\u65b9\u6848\u6838\u5fc3\u3002<\/p>\n<table style=\"display: table; text-align: left; overflow: auto; border-collapse: collapse; margin: 1.4em auto; max-width: 100%; table-layout: fixed; overflow-wrap: break-word; word-break: break-all;\" width=\"800\">\n<thead>\n<tr>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u6b65\u9aa4<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u505a\u4ec0\u4e48<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u89c2\u5bdf\u9996\u5c3e<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">IntersectionObserver \u76ef\u56fa\u5b9a\u957f\u5ea6\u5217\u8868\u7684\u7b2c\u4e00\u4e2a\u548c\u6700\u540e\u4e00\u4e2a\u5143\u7d20<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u66f4\u65b0 firstIndex<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u6309\u6eda\u52a8\u65b9\u5411\u52a0\u51cf listSize\/2<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u6362\u6570\u636e<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u53ea\u6e32\u67d3\u7a97\u53e3\u5185\u90a3\u4e00\u6bb5<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u6539 padding<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u7528 padding \u586b\u672c\u8be5\u8d8a\u6765\u8d8a\u591a\u7684 DOM \u9ad8\u5ea6<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e00\u3001Intersection Observer<\/h2>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u57fa\u672c\u6982\u5ff5<\/h3>\n<p style=\"margin: 1em 0px;\">\u68c0\u6d4b\u5143\u7d20\u662f\u5426\u53ef\u89c1\u3001\u6216\u76f8\u5bf9\u53e6\u4e00\u5143\u7d20\u662f\u5426\u53ef\u89c1\uff0c\u4f20\u7edf\u505a\u6cd5\u53c8\u590d\u6742\u53c8\u8d35\uff1a\u542c scroll\u3001\u67e5 DOM\u3001\u7b97\u9ad8\u5ea6\u4f4d\u7f6e\u3002Intersection Observer \u63d0\u4f9b<strong style=\"color: #4870ac;\">\u5f02\u6b65\u67e5\u8be2<\/strong>\u5143\u7d20\u76f8\u5bf9\u5176\u4ed6\u5143\u7d20\u6216\u89c6\u7a97\u7684\u4f4d\u7f6e\uff0c\u53bb\u6389\u6602\u8d35\u7684 DOM \u67e5\u8be2\u548c\u6837\u5f0f\u8bfb\u53d6\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u517c\u5bb9\u6027<\/h3>\n<p style=\"margin: 1em 0px;\">\u4e3b\u8981\u662f Safari \u8f83\u5dee\uff0c\u8981 12.2 \u53ca\u4ee5\u4e0a\u3002\u4e0d\u8fc7\u6709 <a href=\"https:\/\/www.npmjs.com\/package\/intersection-observer\">polyfill<\/a> \u53ef\u7528\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u5e94\u7528\u573a\u666f<\/h3>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u6eda\u52a8\u61d2\u52a0\u8f7d\u3002<\/section>\n<\/li>\n<li>\n<section>\u65e0\u9650\u4e0b\u62c9\uff08\u672c\u6587\uff09\u3002<\/section>\n<\/li>\n<li>\n<section>\u76d1\u6d4b\u5e7f\u544a\u66dd\u5149\u505a\u7edf\u8ba1\u3002<\/section>\n<\/li>\n<li>\n<section>\u6eda\u5230\u76ee\u6807\u4f4d\u7f6e\u518d\u505a\u4ea4\u4e92\uff08\u5982\u89c6\u9891\u6eda\u51fa\u89c6\u7a97\u5c31\u6682\u505c\uff09\u3002<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e8c\u3001padding \u65b9\u6848\u600e\u4e48\u8dd1<\/h2>\n<p style=\"margin: 1em 0px;\">\u603b\u4f53\u601d\u8def\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u76d1\u542c\u56fa\u5b9a\u957f\u5ea6\u5217\u8868\u7684\u9996\u5c3e\u662f\u5426\u8fdb\u5165\u89c6\u7a97\uff1b<\/section>\n<\/li>\n<li>\n<section>\u66f4\u65b0\u5f53\u524d\u6e32\u67d3\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u5e8f\u53f7 firstIndex\uff1b<\/section>\n<\/li>\n<li>\n<section>\u6309\u5e8f\u53f7\u53d6\u6570\u636e\uff0c\u5217\u8868\u91cd\u7ed8\u6210\u5bf9\u5e94\u5185\u5bb9\uff1b<\/section>\n<\/li>\n<li>\n<section>\u8c03\u6574\u5bb9\u5668 padding\uff0c\u6a21\u62df\u6eda\u52a8\u3002<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u6838\u5fc3\uff1a<\/strong>\u7528\u7236\u5143\u7d20 padding \u53bb\u586b\u5145\u65e0\u9650\u4e0b\u62c9\u672c\u8be5\u8d8a\u6765\u8d8a\u591a\u7684 DOM\uff0c\u89c6\u7a97\u4e0a\u4e0b\u53ea\u4fdd\u7559\u4e00\u5b9a\u6570\u91cf\u8282\u70b9\u6765\u6e32\u67d3\u6570\u636e\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">1. \u89c2\u5bdf\u9996\u5c3e\u5143\u7d20<\/h3>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ \u89c2\u5bdf\u8005\u521b\u5efa\nthis.observer = new IntersectionObserver(callback, options);\n\n\/\/ \u89c2\u5bdf\u5217\u8868\u7b2c\u4e00\u4e2a\u4ee5\u53ca\u6700\u540e\u4e00\u4e2a\u5143\u7d20\nthis.observer.observe(this.firstItem);\nthis.observer.observe(this.lastItem);<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u4ee5\u56fa\u5b9a\u6e32\u67d3 20 \u4e2a\u4e3a\u4f8b\uff0c\u9996\u5c3e\u4efb\u4e00\u91cd\u65b0\u8fdb\u5165\u89c6\u7a97\u5c31\u4f1a\u8fdb callback\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">const callback = (entries) =&gt; {\n    entries.forEach((entry) =&gt; {\n        if (entry.target.id === firstItemId) {\n            \/\/ \u5f53\u7b2c\u4e00\u4e2a\u5143\u7d20\u8fdb\u5165\u89c6\u7a97\n        } else if (entry.target.id === lastItemId) {\n            \/\/ \u5f53\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u8fdb\u5165\u89c6\u7a97\n        }\n    });\n};<\/code><\/pre>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">2. \u66f4\u65b0 firstIndex<\/h3>\n<p style=\"margin: 1em 0px;\">\u6570\u7ec4\u4f1a\u968f\u8bf7\u6c42\u53d8\u957f\uff0c\u9875\u9762\u59cb\u7ec8\u53ea\u6e32\u67d3\u5176\u4e2d\u4e00\u6bb5\uff08\u6bd4\u5982 20 \u4e2a\uff09\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u5f00\u59cb\u6e32\u67d3 0\u201319\uff0cfirstIndex \u4e3a 0\uff1b<\/section>\n<\/li>\n<li>\n<section>\u5e8f\u53f7 19\uff08lastItem\uff09\u8fdb\u5165\u89c6\u7a97\uff0c\u5f80\u540e\u6e32\u67d3 10 \u4e2a\uff0c\u53d8\u6210 10\u201329\uff0cfirstIndex \u4e3a 10\uff1b<\/section>\n<\/li>\n<li>\n<section>\u5e8f\u53f7 29 \u8fdb\u5165\u89c6\u7a97\uff0c\u518d\u5f80\u540e 10 \u4e2a\uff0c\u53d8\u6210 20\u201339\uff0cfirstIndex \u4e3a 20\uff0c\u4ee5\u6b64\u7c7b\u63a8\u3002<\/section>\n<\/li>\n<\/ul>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ \u6211\u4eec\u5bf9\u539f\u5148\u7684 firstIndex \u505a\u4e86\u7f13\u5b58\nconst { currentIndex } = this.domDataCache;\n\n\/\/ \u4ee5\u5168\u90e8\u5bb9\u5668\u5185\u6240\u6709\u5143\u7d20\u7684\u4e00\u534a\u4f5c\u4e3a\u6bcf\u4e00\u6b21\u6e32\u67d3\u7684\u589e\u91cf\nconst increment = Math.floor(this.listSize \/ 2);\n\nlet firstIndex;\n\nif (isScrollDown) {\n    \/\/ \u5411\u4e0b\u6eda\u52a8\u65f6\u5e8f\u53f7\u589e\u52a0\n    firstIndex = currentIndex + increment;\n} else {\n    \/\/ \u5411\u4e0a\u6eda\u52a8\u65f6\u5e8f\u53f7\u51cf\u5c11\n    firstIndex = currentIndex - increment;\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u66f4\u65b0 firstIndex\uff0c\u662f\u4e3a\u4e86\u6839\u636e\u6eda\u52a8\u77e5\u9053\u63a5\u4e0b\u6765\u8be5\u53d6\u3001\u8be5\u6e32\u67d3\u54ea\u4e9b\u6570\u636e\u3002<\/strong><\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">3. \u6309\u5e8f\u53f7\u53d6\u6570\u5e76\u91cd\u7ed8<\/h3>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">const renderFunction = (firstIndex) =&gt; {\n    \/\/ offset = firstIndex, limit = 10 =&gt; getData\n    \/\/ getData Done =&gt;  new dataItems =&gt; render DOM\n };<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u6309 firstIndex \u67e5\u6570\u636e\uff0c\u6e32\u67d3\u5230\u9875\u9762\u5373\u53ef\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">4. \u7528 padding \u6a21\u62df\u6eda\u52a8<\/h3>\n<p style=\"margin: 1em 0px;\">\u6700\u7c97\u66b4\u662f\u6bcf\u591a 10 \u6761\u6570\u636e\u5c31\u518d\u585e 10 \u4e2a DOM\u3002\u672c\u65b9\u6848\u662f\uff1a<strong style=\"color: #4870ac;\">\u8fd9 10 \u6761\u65b0\u6570\u636e\u7528\u539f\u6709 DOM \u53bb\u6e32\u67d3\uff0c\u66ff\u6362\u5df2\u79bb\u5f00\u89c6\u7a97\u7684\u6570\u636e\uff1b\u672c\u8be5\u6491\u5f00\u9ad8\u5ea6\u7684\u90e8\u5206\u7528 padding \u586b\u5145\u3002<\/strong><\/p>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/20200426202801.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2920\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/20200426202801.png\" alt=\"20200426202801\" width=\"735\" height=\"573\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u5411\u4e0b\u6eda\u52a8\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ padding\u7684\u589e\u91cf = \u6bcf\u4e00\u4e2aitem\u7684\u9ad8\u5ea6 x \u65b0\u7684\u6570\u636e\u9879\u7684\u6570\u76ee\nconst remPaddingsVal = itemHeight * (Math.floor(this.listSize \/ 2));\n\nif (isScrollDown) {\n    \/\/ paddingTop\u65b0\u589e\uff0c\u586b\u5145\u9876\u90e8\u4f4d\u7f6e\n    newCurrentPaddingTop = currentPaddingTop + remPaddingsVal;\n\n    if (currentPaddingBottom === 0) {\n        newCurrentPaddingBottom = 0;\n    } else {\n        \/\/ \u5982\u679c\u539f\u6765\u6709paddingBottom\u5219\u51cf\u53bb\uff0c\u4f1a\u6709\u6eda\u52a8\u5230\u5e95\u90e8\u7684\u5143\u7d20\u8fdb\u884c\u66ff\u4ee3\n        newCurrentPaddingBottom = currentPaddingBottom - remPaddingsVal;\n    }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume4.gif\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2921\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume4.gif\" alt=\"resume4\" width=\"1113\" height=\"740\" srcset=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume4.gif 1113w, https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume4-90x60.gif 90w\" sizes=\"(max-width: 1113px) 100vw, 1113px\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u5411\u4e0a\u6eda\u52a8\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ padding\u7684\u589e\u91cf = \u6bcf\u4e00\u4e2aitem\u7684\u9ad8\u5ea6 x \u65b0\u7684\u6570\u636e\u9879\u7684\u6570\u76ee\nconst remPaddingsVal = itemHeight * (Math.floor(this.listSize \/ 2));\n\nif (!isScrollDown) {\n    \/\/ paddingBottom\u65b0\u589e\uff0c\u586b\u5145\u5e95\u90e8\u4f4d\u7f6e\n    newCurrentPaddingBottom = currentPaddingBottom + remPaddingsVal;\n\n    if (currentPaddingTop === 0) {\n        newCurrentPaddingTop = 0;\n    } else {\n        \/\/ \u5982\u679c\u539f\u6765\u6709paddingTop\u5219\u51cf\u53bb\uff0c\u4f1a\u6709\u6eda\u52a8\u5230\u9876\u90e8\u7684\u5143\u7d20\u8fdb\u884c\u66ff\u4ee3\n        newCurrentPaddingTop = currentPaddingTop - remPaddingsVal;\n    }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume5.gif\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2922\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/04\/resume5.gif\" alt=\"resume5\" width=\"672\" height=\"508\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u6700\u540e\u66f4\u65b0 padding \u548c\u7f13\u5b58\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ \u5bb9\u5668padding\u91cd\u65b0\u8bbe\u7f6e\nthis.updateContainerPadding({\n    newCurrentPaddingBottom,\n    newCurrentPaddingTop\n})\n\n\/\/ DOM\u5143\u7d20\u76f8\u5173\u6570\u636e\u7f13\u5b58\u66f4\u65b0\nthis.updateDomDataCache({\n    currentPaddingTop: newCurrentPaddingTop,\n    currentPaddingBottom: newCurrentPaddingBottom\n});<\/code><\/pre>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e09\u3001\u548c iScroll \u7b49\u6bd4\u4e00\u6bd4<\/h2>\n<p style=\"margin: 1em 0px;\">Intersection Observer \u5f02\u6b65\u76d1\u542c\u6eda\u52a8\u4f4d\u7f6e\uff0c\u5c3d\u91cf\u5c11\u78b0 DOM\uff1b\u56de\u8c03\u91cc\u6362\u6570\u636e\uff0c\u7528 padding \u4ee3\u66ff\u8d8a\u6765\u8d8a\u591a\u7684\u8282\u70b9\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/github.com\/cubiq\/iscroll\">iScroll<\/a> infinite \u7684\u6982\u8981\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u542c\u4f20\u7edf\u6eda\u52a8\u4e8b\u4ef6\uff0c\u62ff\u6eda\u52a8\u8ddd\u79bb\uff1b<\/section>\n<\/li>\n<li>\n<section>\u8bbe\u7236\u5143\u7d20 translate \u8ba9\u5185\u5bb9\u6574\u4f53\u4e0a\u79fb\u6216\u4e0b\u79fb\uff1b<\/section>\n<\/li>\n<li>\n<section>\u518d\u7b97\u54ea\u4e9b\u5b50\u5143\u7d20\u5df2\u51fa\u89c6\u7a97\uff0c\u8981\u4e0d\u8981\u628a\u5b83\u4eec\u79fb\u5230\u672b\u5c3e\uff08\u518d\u8bbe\u5b50\u5143\u7d20 translate\uff09\u3002\u50cf\u5faa\u73af\u961f\u5217\uff1a\u9876\u90e8\u5148\u51fa\u89c6\u7a97\uff0c\u518d\u63a5\u5230\u672b\u5c3e\u3002<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u5b9e\u73b0\uff1a<\/strong> \u4e00\u8fb9\u662f\u89c2\u5bdf\u9996\u5c3e\u3001\u5b9a\u91cf\u6539\u7236\u7ea7 padding\uff1b\u4e00\u8fb9\u662f\u6eda\u52a8\u8ddd\u79bb + \u4e00\u4e32\u8ba1\u7b97\u53bb\u6539\u7236\u5b50 translate\u3002\u524d\u8005\u66f4\u5e72\u51c0\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u6027\u80fd\uff1a<\/strong> padding \u548c translate \u5dee\u8ddd\u5f88\u5c0f\u3002\u5173\u952e\u662f Intersection Observer \u62bd\u6389\u4e86\u6eda\u52a8\u8ddd\u79bb\u67e5\u8be2\u548c\u590d\u6742\u8ba1\u7b97\uff0c\u540c\u6b65 scroll \u53d8\u6210\u5f02\u6b65\uff0c\u4e5f\u4e0d\u5fc5\u53e6\u505a\u9632\u6296\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u7f3a\u9677<\/h3>\n<p style=\"margin: 1em 0px;\">padding \u8ba1\u7b97\u4f9d\u8d56\u5217\u8868\u9879\u56fa\u5b9a\u9ad8\u5ea6\u3002<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u601d\u8def 1\uff1a\u7528 <a href=\"https:\/\/uxdesign.cc\/what-you-should-know-about-skeleton-screens-a820c45a571a\">Skeleton Screen Loading<\/a> \u5360\u4f4d\uff0c\u6570\u636e\u56de\u6765\u518d\u66ff\u6362\uff0c\u4e0d\u53d7\u5f02\u6b65\u83b7\u53d6\u5f71\u54cd\u3002<\/section>\n<\/li>\n<li>\n<section>\u601d\u8def 2\uff1a\u6eda\u5230\u76ee\u6807\u5148\u5835\u4f4f padding \u66f4\u65b0\uff0c\u7b49\u8bf7\u6c42\u5b8c\u518d\u7528 loading gif\u3002\u8981\u5168\u9762\u8003\u8651\u96be\u4ee5\u9884\u6d4b\u7684\u6eda\u52a8\uff0c\u76f8\u5bf9\u590d\u6742\u3002<\/section>\n<\/li>\n<\/ul>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u5ef6\u4f38<\/h3>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u65e0\u9650\u4e0b\u62c9\u6709\u4e86\uff0c\u65e0\u9650\u4e0a\u62c9\u600e\u4e48\u6539\uff1f<\/section>\n<\/li>\n<li>\n<section>\u628a Intersection Observer \u585e\u8fdb iScroll\uff0c\u539f\u65b9\u6848\u80fd\u600e\u4e48\u4f18\u5316\uff1f<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/github.com\/Guohjia\/listScroll\">\u5b8c\u6574\u4ee3\u7801\u5b9e\u73b0\u53c2\u8003<\/a><\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u56db\u3001\u53c2\u8003<\/h2>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/API\/Intersection_Observer_API\">Intersection Observer API<\/a><\/section>\n<\/li>\n<li>\n<section><a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/04\/intersectionobserver\">IntersectionObserver\u2019s Coming into View<\/a><\/section>\n<\/li>\n<li>\n<section><a href=\"https:\/\/medium.com\/walmartlabs\/infinite-scrolling-the-right-way-11b098a08815\">Infinite Scroll\u2019ing the right way<\/a><\/section>\n<\/li>\n<\/ul>\n<blockquote style=\"display: block; font-size: 0.9em; border-left: 3px solid #4870ac; padding: 0.5em 1em; margin: 0px; background: #f6f8fa; color: #40464f;\">\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1a\u65e0\u9650\u4e0b\u62c9\u4e0d\u5fc5\u8d8a\u6eda DOM \u8d8a\u591a\uff1a\u89c2\u5bdf\u7a97\u53e3\u9996\u5c3e\uff0c\u53ea\u6e32\u67d3\u4e00\u6bb5\u6570\u636e\uff0c\u7528 padding \u628a\u6eda\u8d70\u7684\u9ad8\u5ea6\u8865\u4e0a\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>\u957f\u5217\u8868\u548c\u65e0\u9650\u4e0b\u62c9\u662f\u524d\u7aef\u8001\u751f\u5e38\u8c08\u3002\u672c\u6587\u4ecb\u7ecd\u4e00\u79cd\u7b80\u6d01\u3001\u5de7\u5999\u3001\u9ad8\u6548\u7684\u505a\u6cd5\uff1a\u53ea\u6e32\u67d3\u53ef\u89c6\u533a\u57df\u9644\u8fd1\u7684 DOM\uff0c\u6eda\u52a8\u65f6\u4e3b\u8981\u6539 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[105,127],"tags":[209,155],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2918"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2918"}],"version-history":[{"count":1,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2918\/revisions"}],"predecessor-version":[{"id":2923,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2918\/revisions\/2923"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}