cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (401) hide show
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/52689.html ADDED
@@ -0,0 +1,259 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>浏览器的一些“滚动”行为鉴赏 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">浏览器的一些“滚动”行为鉴赏</h1><div class="post-meta"><span class="date">2019-09-30</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 1.4k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 5</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/52689.html#vcomment"><span class="waline-comment-count" data-path="/article/52689.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://juejin.im/post/5d75adfbe51d4561e84fcc9c#comment</code><br>按照我的个人理解，滚动分<code>全局滚动(浏览器窗口)</code>跟<code>局部滚动(自定义的盒子)</code>，以下内容绝大部分都是指<code>全局滚动</code>，<code>局部滚动</code>的话获取<code>指定的DOM</code>再调用<code>相应的API</code>即可✅</p>
20
+ <span id="more"></span>
21
+ <h2 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h2><h2 id="如何设置全局滚动条高度"><a href="#如何设置全局滚动条高度" class="headerlink" title="如何设置全局滚动条高度"></a>如何设置全局滚动条高度</h2><ol>
22
+ <li><p>最常用的方法：<br> window.scrollTo(0, 0);</p>
23
+ <p> &#x2F;&#x2F; or<br> window.scrollTo({<br> left: 0,<br> top: 100<br> });</p>
24
+ </li>
25
+ <li><p>也可以利用<code>相对滚动</code>设置：<br> window.scrollBy(0, 0);</p>
26
+ <p> &#x2F;&#x2F; or<br> window.scrollBy({<br> left: 0,<br> top: 100<br> });</p>
27
+ </li>
28
+ <li><p>或者利用<code>scrollTop</code>设置：</p>
29
+ <p> document.scrollingElement.scrollTop &#x3D; 100;</p>
30
+ </li>
31
+ </ol>
32
+ <p>注意：<code>scrollTo</code>跟<code>scrollBy</code>的参数是一样的，区别就是<code>scrollBy</code>滚动距离是相对与当前滚动条位置进行滚动✅<br>效果对比如下：</p>
33
+ <p><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1fcdfa04499a6?imageslim" alt="xuehuayu.cn"><br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1fccda4295d45?imageslim" alt="xuehuayu.cn"><br>很明显，<code>前者</code>就是把滚动高度设置成<code>100</code>，而<code>后者</code>是每次都增加<code>100</code>，这就是为什么称之为<code>相对滚动</code>了✅</p>
34
+ <h2 id="如何指定一个元素显示在视窗"><a href="#如何指定一个元素显示在视窗" class="headerlink" title="如何指定一个元素显示在视窗"></a>如何指定一个元素显示在视窗</h2><ol>
35
+ <li><p>最常用的方法：</p>
36
+ <p> &#x2F;&#x2F; 获取元素的offsetTop(元素距离文档顶部的距离)<br> let offsetTop &#x3D; document.querySelector(“.box”).offsetTop;</p>
37
+ <p> &#x2F;&#x2F; 设置滚动条的高度<br> window.scrollTo(0, offsetTop);</p>
38
+ </li>
39
+ </ol>
40
+ <p>效果如下：</p>
41
+ <p><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1fd8a8dba6bb5?imageslim" alt="xuehuayu.cn"></p>
42
+ <ol>
43
+ <li>或者用锚点：<br> <a href="#box">盒子出现在顶部</a> <div id="box"></div></li>
44
+ </ol>
45
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1fd8df0ffc99c?imageslim" alt="xuehuayu.cn"></p>
46
+ <ol>
47
+ <li><p>或者利用<code>scrollIntoView</code>进行展现：</p>
48
+ <p> document.querySelector(“.box”).scrollIntoView();</p>
49
+ </li>
50
+ </ol>
51
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1fe163c5ac8db?imageslim" alt="xuehuayu.cn"></p>
52
+ <p>还可以指定元素的出现位置：</p>
53
+ <pre><code>// start出现在视口顶部、center出现在视口中央、end出现在视口底部
54
+ document.querySelector(&quot;.box&quot;).scrollIntoView(&#123;
55
+ block: &quot;start&quot; || &quot;center&quot; || &quot;end&quot;
56
+ &#125;);
57
+ </code></pre>
58
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1fe6612f88547?imageslim" alt="xuehuayu.cn"></p>
59
+ <h2 id="如何设置滚动具有平滑的过渡效果"><a href="#如何设置滚动具有平滑的过渡效果" class="headerlink" title="如何设置滚动具有平滑的过渡效果"></a>如何设置滚动具有平滑的过渡效果</h2><ol>
60
+ <li><p>利用每个方法的<code>参数</code>设置：</p>
61
+ <p> window.scrollTo({<br> behavior: “smooth”<br> });</p>
62
+ <p> window.scrollBy({<br> behavior: “smooth”<br> });</p>
63
+ <p> document.querySelector(“.box”).scrollIntoView({<br> behavior: “smooth”<br> });</p>
64
+ </li>
65
+ </ol>
66
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1fea43de896d9?imageslim" alt="xuehuayu.cn"></p>
67
+ <ol>
68
+ <li><p>或者用<code>css</code>属性设置：</p>
69
+ <p> html {<br> scroll-behavior: smooth; &#x2F;&#x2F; 全局滚动具有平滑效果<br> }</p>
70
+ <p> &#x2F;&#x2F; 或者所有</p>
71
+ <ul>
72
+ <li>{<br> scroll-behavior: smooth;<br> }</li>
73
+ </ul>
74
+ </li>
75
+ </ol>
76
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1feddb7347ea4?imageslim" alt="xuehuayu.cn"><br>注意：设置了该属性之后，所有方法都可以不用设置<code>behavior</code>参数了，二选一即可，因为都是<code>控制当前指定元素的滚动行为</code>，所以锚点跳转、设置<code>scrollTop</code>也具有平滑(<code>smooth</code>)的<code>滚动行为</code>✅</p>
77
+ <h2 id="一些有趣的东西"><a href="#一些有趣的东西" class="headerlink" title="一些有趣的东西"></a>一些有趣的东西</h2><h4 id="1-scrollingElement"><a href="#1-scrollingElement" class="headerlink" title="1. scrollingElement"></a>1. scrollingElement</h4><p>该对象可以非常<code>兼容</code>地获取<code>scrollTop</code>、<code>scrollHeight</code>等属性，在<code>移动端</code>跟<code>PC端</code>都屡试不爽🤞<br>还记得当初写这个兼容性方法：<br> let scrollHeight &#x3D; document.documentElement.scrollHeight || document.body.scrollHeight;</p>
78
+ <p>现在你只需要：<br> let scrollHeight &#x3D; document.scrollingElement.scrollHeight;</p>
79
+ <p>因为在<code>MDN</code>中是这样介绍它的：<br>标准模式返回<code>documentElement</code>，怪异模式返回<code>body</code>；</p>
80
+ <h4 id="2-滚动到底部"><a href="#2-滚动到底部" class="headerlink" title="2. 滚动到底部"></a>2. 滚动到底部</h4><pre><code>window.scrollTo(&#123;
81
+ left: 0,
82
+ top: document.scrollingElement.scrollHeight
83
+ &#125;);
84
+
85
+ // 如果你实在是懒的话...
86
+ window.scrollTo(0, 999999);
87
+ </code></pre>
88
+ <p>注意：平滑滚动到<code>顶部</code>或者<code>底部</code>自己加参数或者属性即可✅</p>
89
+ <h4 id="3-判断浏览器已滚动到底部"><a href="#3-判断浏览器已滚动到底部" class="headerlink" title="3. 判断浏览器已滚动到底部"></a>3. 判断浏览器已滚动到底部</h4><pre><code>window.addEventListener(&quot;scroll&quot;, () =&gt; &#123;
90
+ let &#123;
91
+ scrollTop,
92
+ scrollHeight,
93
+ clientHeight
94
+ &#125; = document.scrollingElement;
95
+
96
+ // 当前滚动高度 + 视口高度 &gt;= 文档总高度
97
+ if (scrollTop + clientHeight &gt;= scrollHeight) &#123;
98
+ console.log(&quot;已到达底部&quot;);
99
+ &#125;
100
+ &#125;);
101
+ </code></pre>
102
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d1ffedc0c17ddb?imageslim" alt="xuehuayu.cn"></p>
103
+ <h4 id="函数节流"><a href="#函数节流" class="headerlink" title="函数节流"></a>函数节流</h4><p>当你没加函数节流：</p>
104
+ <pre><code>window.addEventListener(&quot;scroll&quot;, () =&gt; console.log(&quot;我在滚我在滚！&quot;));
105
+ </code></pre>
106
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d200492116dbce?imageslim" alt="xuehuayu.cn"><br>当你加了函数节流之后：</p>
107
+ <pre><code>window.addEventListener(&quot;scroll&quot;, throttle(() =&gt; console.log(&quot;我在滚我在滚！&quot;)));
108
+ </code></pre>
109
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d200931b39f8fb?imageslim" alt="xuehuayu.cn"></p>
110
+ <p><code>throttle</code>源码：</p>
111
+ <pre><code>function throttle(fn, interval = 500) &#123;
112
+ let run = true;
113
+
114
+ returnfunction () &#123;
115
+ if (!run) return;
116
+ run = false;
117
+ setTimeout(() =&gt; &#123;
118
+ fn.apply(this, arguments);
119
+ run = true;
120
+ &#125;, interval);
121
+ &#125;;
122
+ &#125;
123
+ </code></pre>
124
+ <p>用处：减少代码执行频率✅</p>
125
+ <h4 id="函数防抖"><a href="#函数防抖" class="headerlink" title="函数防抖"></a>函数防抖</h4><p>当你加了函数防抖之后：</p>
126
+ <pre><code>window.addEventListener(&quot;scroll&quot;, debounce(() =&gt; console.log(&quot;滚动结束！&quot;)));
127
+ </code></pre>
128
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/11/16d2010a3b42646a?imageslim" alt="xuehuayu.cn"></p>
129
+ <p><code>debounce</code>源码：</p>
130
+ <pre><code>function debounce(fn, interval = 500) &#123;
131
+ let timeout = null;
132
+
133
+ returnfunction () &#123;
134
+ clearTimeout(timeout);
135
+ timeout = setTimeout(() =&gt; &#123;
136
+ fn.apply(this, arguments);
137
+ &#125;, interval);
138
+ &#125;;
139
+ &#125;
140
+ </code></pre>
141
+ <p>用处：判断某个<code>动作结束</code>，如刚刚的滚动结束、input输入结束等✅</p>
142
+ <h4 id="解决IOS设备局部滚动不顺畅-粘手"><a href="#解决IOS设备局部滚动不顺畅-粘手" class="headerlink" title="解决IOS设备局部滚动不顺畅(粘手)"></a>解决IOS设备局部滚动不顺畅(粘手)</h4><p>除了浏览器原生滚动，<code>自定义的滚动条</code>都会出现这种情况，加以下属性就可以解决：</p>
143
+ <pre><code>.box &#123;
144
+ -webkit-overflow-scrolling: touch;
145
+ &#125;
146
+ </code></pre>
147
+ <p>对比如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d2338d59cd5e06?imageslim" alt="xuehuayu.cn"><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d2338f4c7f4e0c?imageslim" alt="xuehuayu.cn"></p>
148
+ <p>注意：要真机才能看到效果，这里指的<code>局部滚动</code>是指<code>自己定义的盒子</code>，然后设置<code>overflow: auto || scroll;</code>后的滚动行为；</p>
149
+ <h4 id="滚动传播"><a href="#滚动传播" class="headerlink" title="滚动传播"></a>滚动传播</h4><p>指有多个<code>滚动区域</code>，当一个<code>滚动区域</code>滚动完之后，继续滚动会<code>传播到</code>到父区域继续滚动的行为：</p>
150
+ <pre><code>.box &#123;
151
+ overscroll-behavior: contain; // 阻止滚动传播
152
+ &#125;
153
+ </code></pre>
154
+ <p>对比效果图如下：</p>
155
+ <p><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d2341f99d7b4b8?imageslim" alt="xuehuayu.cn"><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d23421cf5ea388?imageslim" alt="xuehuayu.cn"></p>
156
+ <h4 id="横向滚动"><a href="#横向滚动" class="headerlink" title="横向滚动"></a>横向滚动</h4><p><code>移动端</code>遇到此需求比较多，常用于图片展示：</p>
157
+ <pre><code>&lt;ul&gt;
158
+ &lt;li&gt;
159
+ &lt;img src=&quot;&quot;&gt;
160
+ &lt;/li&gt;
161
+ // ...
162
+ &lt;/ul&gt;
163
+
164
+ ul &#123;
165
+ white-space: nowrap; // 超出不换行
166
+ overflow-x: auto;
167
+
168
+ li &#123;
169
+ display: inline-block;
170
+
171
+ img &#123;
172
+ display: block;
173
+ width: 200px;
174
+ &#125;
175
+ &#125;
176
+ &#125;
177
+ </code></pre>
178
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d234e1a9ec16bd?imageslim" alt="xuehuayu.cn"></p>
179
+ <h4 id="滚动结束后，强制滚动到指定元素"><a href="#滚动结束后，强制滚动到指定元素" class="headerlink" title="滚动结束后，强制滚动到指定元素"></a>滚动结束后，强制滚动到指定元素</h4><p>基于上面的例子，我们设置如下属性：</p>
180
+ <pre><code>ul &#123;
181
+ scroll-snap-type: x mandatory;
182
+
183
+ li &#123;
184
+ scroll-snap-align: start;
185
+ &#125;
186
+ &#125;
187
+ </code></pre>
188
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d235b560e4b58c?imageslim" alt="xuehuayu.cn"></p>
189
+ <p>仔细看会发现，我们松手的时候，会将<code>最近的元素</code>滚动到最右边（初始位置，对于Y轴来讲就是顶部，X轴则是右边）<br>也可以设置出现在中间：</p>
190
+ <pre><code>li &#123;
191
+ scroll-snap-align: center;
192
+ &#125;
193
+ </code></pre>
194
+ <p>效果如下：<br><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d2363b256ce9f4?imageslim" alt="xuehuayu.cn"></p>
195
+ <p>这样，一个简易的<code>轮播图</code>效果就出来啦！<br>还可以实现全屏滚动：<br><img src="https://user-gold-cdn.xitu.io/2019/9/12/16d237cd9b5732c9?imageslim" alt="xuehuayu.cn"></p>
196
+ <p>注意：该属性会在你<code>滚动完</code>之后再做处理，也就是说你可以一下子从<code>图片1</code>跳到<code>图片9</code>✅</p>
197
+ <h2 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h2><p>以上涉及到的<code>方法或属性</code>文档如下：</p>
198
+ <ol>
199
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo">scrollTo</a></li>
200
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollBy">scrollBy</a></li>
201
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView">scrollIntoView</a></li>
202
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scrollingElement">scrollingElement</a></li>
203
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior">scroll-behavior</a></li>
204
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling">-webkit-overflow-scrolling</a></li>
205
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior">overscroll-behavior</a></li>
206
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type">scroll-snap-type</a></li>
207
+ <li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-align">scroll-snap-align</a></li>
208
+ </ol>
209
+ <h2 id="相关推荐"><a href="#相关推荐" class="headerlink" title="相关推荐"></a>相关推荐</h2><p><a target="_blank" rel="noopener" href="https://juejin.im/post/5d665133e51d4561c83e7c83">利用”交叉观察者”这个小宝贝儿，轻松实现懒加载、吸顶、触底 ❗</a></p>
210
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/52689.html">https://xuehuayu.cn/article/52689.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/62887.html">9102了，你还不会移动端真机调试？</a><a class="next" href="/article/23301.html">30 seconds of code 30秒就能理解的JavaScript优秀代码</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
211
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
212
+ const locale = {
213
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
214
+ sofa: '沙发空缺中，还不快抢~',
215
+ };
216
+ Waline.init({
217
+ el: '#vcomment',
218
+ serverURL: serverURL,
219
+ pageSize: '20',
220
+ visitor: true, // 阅读量统计
221
+ requiredMeta: ['nick', 'mail'],
222
+ emoji: [
223
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
224
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
225
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
226
+ ],
227
+ locale,
228
+ pageview: true
229
+ })
230
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
231
+ var val = $(this).val()
232
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
233
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
234
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
235
+
236
+ if (val === 'self') {
237
+ $('#search').html(self)
238
+ var search_path = 'search.xml';
239
+ if (search_path.length == 0) {
240
+ search_path = 'search.xml';
241
+ }
242
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
243
+ searchFunc(path, 'local-search-input', 'local-search-result');
244
+ } else if (val === 'baidu') {
245
+ $('#search').html(baidu)
246
+ } else if (val === 'google') {
247
+ $('#search').html(google)
248
+ }
249
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
250
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
251
+ if (cnb) {
252
+ var gxba =document.getElementById('gxba')
253
+ var gaba =document.getElementById('gaba')
254
+ var gabaLink =document.getElementById('gaba-link')
255
+ gxba.innerText ='京ICP备20007647号-1'
256
+ gaba.innerText ='京公网安备 11010802031254号'
257
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
258
+ }
259
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>