{"id":312228,"date":"2020-10-29T09:00:52","date_gmt":"2020-10-29T09:00:52","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=312228"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=312228","title":{"rendered":"\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u0432 JavaScript"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ig\/mq\/2d\/igmq2dvqrh3pvqpohaicef0c3zi.png\"><\/p>\n<p>  \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c (observer) \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0432 \u043d\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u042d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435\u043c (\u0447\u0443\u0442\u044c \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u00ab\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0441\u043b\u0435\u0436\u043a\u0430\u00bb), \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u0435\u0432\u044b\u043c. \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u0430\u043a \u043e\u0434\u043d\u043e\u0433\u043e, \u0442\u0430\u043a \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0442\u0430\u043a\u0436\u0435 \u0438 \u0437\u0430 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0412 JavaScript \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u0438\u0434\u0430 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439:<\/p>\n<ol>\n<li>ResizeObserver<\/li>\n<li>IntersectionObserver<\/li>\n<li>MutationObserver<\/li>\n<\/ol>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>Resize Observer<\/h3>\n<p>  <\/p>\n<h6>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/h6>\n<p>  \u041d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<h6>\u0422\u0435\u043e\u0440\u0438\u044f<\/h6>\n<p>  <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/ResizeObserver\" rel=\"nofollow\">MDN<\/a><br \/>  <a href=\"https:\/\/habr.com\/ru\/post\/487146\/\">\u041c\u043e\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0425\u0430\u0431\u0440\u0435<\/a><\/p>\n<h6>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cr\/vn\/aj\/crvnajuyy-nw8yy936_9ggtgm2i.png\"><\/p>\n<h6>\u041f\u0440\u0438\u043c\u0435\u0440<\/h6>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0437\u0430 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u00abbox\u00bb. \u041f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043c\u0435\u043d\u044c\u0448\u0435\u0439 768px, \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 (\u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u00abfilter: invert(100%)\u00bb), \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"xml\">&lt;div id=&quot;box&quot; class=&quot;box&quot;&gt;   &lt;h1 id=&quot;title&quot; class=&quot;title&quot;&gt;Some Awesome Title&lt;\/h1&gt;   &lt;p id=&quot;text&quot; class=&quot;text&quot;&gt;Some Main Text&lt;\/p&gt;   &lt;span id=&quot;info&quot; class=&quot;info&quot;&gt;Some Secondary Info&lt;\/span&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">* {   margin: 0;   padding: 0;   box-sizing: border-box; } .box, .title, .text, .info {   transition: 0.3s; } .box {   background: #ddd;   color: #222;   min-height: 100vh;   display: flex;   flex-direction: column;   justify-content: space-between;   align-items: center; } .title, .info {   margin: 1rem; } .title {   font-size: 2rem; } .text {   font-size: 1.25rem; } <\/code><\/pre>\n<p>  \u0421\u043a\u0440\u0438\u043f\u0442:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 const changeStyles = (elements, properties, values) =&gt;   elements.forEach((element, index) =&gt; {     element.style[properties[index]] = values[index];   });  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 ResizeObserver const observer = new ResizeObserver((entries) =&gt; {   \/\/ \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 (\u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b)   for (const entry of entries) {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     const width = entry.contentRect.width;      \/\/ \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443     \/\/ \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 768px     \/\/ \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438     if (width &lt; 768) {       changeStyles(         [box, title, text, info],         [&quot;filter&quot;, &quot;fontSize&quot;, &quot;fontSize&quot;, &quot;opacity&quot;],         [&quot;invert(100%)&quot;, &quot;1.5rem&quot;, &quot;1rem&quot;, &quot;0&quot;]       );     } else {       \/\/ \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 768px       \/\/ \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438       changeStyles(         [box, title, text, info],         [&quot;filter&quot;, &quot;fontSize&quot;, &quot;fontSize&quot;, &quot;opacity&quot;],         [&quot;invert(0%)&quot;, &quot;2rem&quot;, &quot;1.25rem&quot;, &quot;1&quot;]       );     }   } });  \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c &quot;box&quot; observer.observe(box); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\"><iframe id=\"5f9a4737d4323713fd415875\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5f9a4737d4323713fd415875\"><\/iframe><\/div>\n<p>  <\/p>\n<h3>IntersectionObserver<\/h3>\n<p>  <\/p>\n<h6>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/h6>\n<p>  \u041d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0437\u0430 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0432\u044b\u0448\u0435\u0441\u0442\u043e\u044f\u0449\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438\u043b\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (viewport).<\/p>\n<h6>\u0422\u0435\u043e\u0440\u0438\u044f<\/h6>\n<p>  <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/IntersectionObserver\" rel=\"nofollow\">MDN<\/a><br \/>  <a href=\"https:\/\/habr.com\/ru\/post\/494670\/\">\u041c\u043e\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0425\u0430\u0431\u0440\u0435<\/a><\/p>\n<h6>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/e9\/g_\/lx\/e9g_lxawfky0jhucqvui45qtwoy.png\"><\/p>\n<h6>\u041f\u0440\u0438\u043c\u0435\u0440<\/h6>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u0441\u0435\u043a\u0446\u0438\u044f\u043c\u0438 (sections) \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0435\u043a\u0446\u0438\u0438 (\u0435\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440) \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0434\u043e \u0441\u0435\u043a\u0446\u0438\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043f\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430: \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u043b\u0443\u0447\u0448\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439.<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;main id=&quot;main&quot;&gt;   &lt;section id=&quot;1&quot; class=&quot;section&quot;&gt;     &lt;h3 class=&quot;title&quot;&gt;First Section Title&lt;\/h3&gt;     &lt;p class=&quot;text&quot;&gt;       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nostrum ex delectus distinctio reprehenderit facere vitae beatae ab dolores, aliquam maiores officia mollitia unde et! Quaerat odit in minus dolor corrupti nemo nam beatae. Ex consequatur rem laborum necessitatibus omnis, soluta fuga maiores repellendus eveniet? Blanditiis quae officiis maiores vitae nobis in voluptate, dicta voluptas rerum. Et laudantium consequuntur vitae tenetur doloremque accusantium tempora quos magni repudiandae voluptatem perferendis velit reprehenderit laborum libero soluta quis id, quidem assumenda nihil obcaecati expedita, aliquam suscipit nesciunt facere. Voluptate rem perferendis ab iste? Maxime, earum quos! Modi, aut quis nihil quidem accusamus vero sunt debitis architecto soluta repellendus fugit suscipit aspernatur labore a est sit dolores in necessitatibus ea tenetur corporis. Exercitationem mollitia impedit qui nemo voluptate numquam perspiciatis repellendus repellat a odio fugit dolor ducimus labore ex veritatis pariatur aliquam enim distinctio libero doloremque saepe quaerat consectetur, ut sapiente. Laboriosam dignissimos iure praesentium modi ab perferendis at molestias maiores suscipit, expedita aut aperiam nam voluptates similique optio minus quam! Voluptas ullam sunt, a officiis accusamus adipisci sed saepe voluptatem minima maxime est assumenda cum quibusdam voluptates provident in quasi vitae. Corrupti voluptatibus laborum ipsum quia, cupiditate adipisci assumenda dolores sunt distinctio, recusandae nesciunt aliquid, explicabo ullam eligendi perspiciatis rerum architecto? Cumque numquam blanditiis, magnam delectus velit laudantium aliquid quibusdam excepturi vero nihil necessitatibus, sed officiis, molestias hic autem modi consequuntur iusto sapiente dolore. Voluptates tenetur provident eius distinctio iure rerum minima eum eaque. Ea autem, deleniti atque magnam eius modi dicta assumenda tempore ducimus molestias. Aperiam enim tenetur, hic blanditiis velit quod odio deserunt sequi quisquam dignissimos animi amet magnam excepturi dicta quidem error quis officia natus. Temporibus nobis dolores veritatis eius illo quas perspiciatis reiciendis dolorum optio, commodi, animi quos at! Amet praesentium totam ab error esse optio quo, quis iusto!     &lt;\/p&gt;   &lt;\/section&gt;   &lt;section id=&quot;2&quot; class=&quot;section&quot;&gt;     &lt;h3 class=&quot;title&quot;&gt;Second Section Title&lt;\/h3&gt;     &lt;p class=&quot;text&quot;&gt;       ...     &lt;\/p&gt;   &lt;\/section&gt;   &lt;section id=&quot;3&quot; class=&quot;section&quot;&gt;     &lt;h3 class=&quot;title&quot;&gt;Third Section Title&lt;\/h3&gt;     &lt;p class=&quot;text&quot;&gt;       ...     &lt;\/p&gt;   &lt;\/section&gt; &lt;\/main&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  \u0421\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">* {   margin: 0;   padding: 0;   box-sizing: border-box; } body {   background: #eee;   color: #222;   text-align: center; } main {   max-width: 768px;   margin: auto; } .section {   padding: 1rem; } .title {   font-size: 1.5rem;   margin: 1rem; } .text {   font-size: 1.25rem; } <\/code><\/pre>\n<p>  \u0421\u043a\u0440\u0438\u043f\u0442:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0435\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c const findLastSection = () =&gt; {   \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0441\u0435\u043a\u0446\u0438\u0438 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   \/\/ \u043d\u043e\u043c\u0435\u0440 \u0441\u0435\u043a\u0446\u0438\u0438 - \u044d\u0442\u043e \u0435\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440   const number = localStorage.getItem(&quot;numberOfSection&quot;) || 1;    \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0435\u043a\u0446\u0438\u044e   const section = document.getElementById(number);    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u044f \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430)   const position = Math.round(section.offsetTop);    \/\/ \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0434\u043e \u043d\u0443\u0436\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438   scrollTo({     top: position,     \/\/ \u043f\u043b\u0430\u0432\u043d\u043e     behavior: &quot;smooth&quot;,   }); };  findLastSection();  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f const createObserver = () =&gt; {   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 IntersectionObserver   const observer = new IntersectionObserver(     (entries) =&gt; {       entries.forEach((entry) =&gt; {         \/\/ \u0435\u0441\u043b\u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0437\u043e\u043d\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438         if (entry.isIntersecting) {           \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435           localStorage.setItem(&quot;numberOfSection&quot;, entry.target.id);         }       });     },     {       \/\/ \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430       \/\/ 10%       threshold: 0.1,     }   );    \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 \u0441\u0435\u043a\u0446\u0438\u0438   const sections = main.querySelectorAll(&quot;section&quot;);   \/\/ \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0437\u0430 \u043d\u0438\u043c\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c   sections.forEach((section) =&gt; observer.observe(section)); };  createObserver(); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\"><iframe id=\"5f9a4738cb79a1e12d6663ee\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5f9a4738cb79a1e12d6663ee\"><\/iframe><\/div>\n<p>  <\/p>\n<h3>MutationObserver<\/h3>\n<p>  <\/p>\n<h6>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/h6>\n<p>  \u041d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432. \u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0438\u0437 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043d\u0430\u043c\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<h6>\u0422\u0435\u043e\u0440\u0438\u044f<\/h6>\n<p>  <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/MutationObserver\" rel=\"nofollow\">MDN<\/a><br \/>  <a href=\"https:\/\/learn.javascript.ru\/mutation-observer\" rel=\"nofollow\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0443\u0447\u0435\u0431\u043d\u0438\u043a \u043f\u043e JavaScript<\/a><\/p>\n<h6>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/es\/w5\/gh\/esw5ghuqvge7jijfs6eulpfw5qk.png\"><\/p>\n<h6>\u041f\u0440\u0438\u043c\u0435\u0440<\/h6>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u00ab\u0442\u0443\u0434\u0443\u0448\u043a\u0443\u00bb, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0437\u0430\u0434\u0430\u0447 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435. \u041f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043d\u0430\u0448 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0445\u043e\u0434 \u043d\u0430 \u00abuseEffect\u00bb \u0432 React.js \u0438\u043b\u0438 \u00abwatch\u00bb \u0432 Vue.js.<\/p>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/p>\n<pre><code class=\"xml\">&lt;div id=&quot;box&quot; class=&quot;box&quot;&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0421\u0442\u0438\u043b\u0438:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">@import url(&quot;https:\/\/fonts.googleapis.com\/css2?family=Stylish&amp;display=swap&quot;);  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: stylish;   font-size: 1rem;   color: #222; }  .box {   max-width: 512px;   margin: auto;   text-align: center; }  .counter {   font-size: 2.25rem;   margin: 0.75rem; }  .form {   display: flex;   margin-bottom: 0.25rem; }  .input {   flex-grow: 1;   border: none;   border-radius: 4px;   box-shadow: 0 0 1px inset #222;   text-align: center;   font-size: 1.15rem;   margin: 0.5rem 0.25rem; }  .input:focus {   outline-color: #5bc0de; }  .btn {   border: none;   outline: none;   background: #337ab7;   padding: 0.5rem 1rem;   border-radius: 4px;   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);   color: #eee;   margin: 0.5rem 0.25rem;   cursor: pointer;   user-select: none;   width: 92px;   text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); }  .btn:active {   box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset; }  .btn.danger {   background: #d9534f; }  .list {   list-style: none; }  .item {   display: flex;   flex-wrap: wrap;   justify-content: space-between;   align-items: center; }  .item + .item {   border-top: 1px dashed rgba(0, 0, 0, 0.5); }  .text {   flex: 1;   font-size: 1.15rem;   margin: 0.5rem;   padding: 0.5rem;   background: #eee;   border-radius: 4px; } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  \u0421\u043a\u0440\u0438\u043f\u0442:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0437\u0430\u0434\u0430\u0447\u0438 const todos = [   {     id: &quot;1&quot;,     text: &quot;Learn HTML&quot;,   },   {     id: &quot;2&quot;,     text: &quot;Learn CSS&quot;,   },   {     id: &quot;3&quot;,     text: &quot;Learn JavaScript&quot;,   },   {     id: &quot;4&quot;,     text: &quot;Stay alive&quot;,   }, ];  \/\/ \u0448\u0430\u0431\u043b\u043e\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 const Item = (todo) =&gt; ` &lt;li   class=&quot;item&quot;   id=&quot;${todo.id}&quot; &gt;   &lt;span class=&quot;text&quot;}&quot;&gt;     ${todo.text}   &lt;\/span&gt;   &lt;button     class=&quot;btn danger&quot;     data-type=&quot;delete&quot;   &gt;     Delete   &lt;\/button&gt; &lt;\/li&gt; `;  \/\/ \u043e\u0431\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d const Template = ` &lt;form id=&quot;form&quot; class=&quot;form&quot;&gt;     &lt;input       type=&quot;text&quot;       class=&quot;input&quot;       id=&quot;input&quot;     &gt;     &lt;button       class=&quot;btn&quot;       data-type=&quot;add&quot;     &gt;       Add     &lt;\/button&gt; &lt;\/form&gt; &lt;ul id=&quot;list&quot; class=&quot;list&quot;&gt;     ${todos.reduce(       (html, todo) =&gt;         (html += `           ${Item(todo)}         `),       &quot;&quot;     )} &lt;\/ul&gt; `;  \/\/ \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0434 \u0432 IIFE (() =&gt; {   \/\/ \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c &quot;box&quot;   box.innerHTML = `   &lt;h1 id=&quot;counter&quot; class=&quot;counter&quot;&gt;     ${todos.length} todo(s) left   &lt;\/h1&gt;   ${Template} `;    \/\/ \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430   input.focus();    \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 MutationObserver   const observer = new MutationObserver(() =&gt; {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u0447 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435     const count = todos.length;      \/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u043b\u0438\u0431\u043e \u043e \u0442\u043e\u043c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\u0447 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c, \u043b\u0438\u0431\u043e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0437\u0430\u0434\u0430\u0447 \u043d\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c     counter.textContent = `     ${count &gt; 0 ? `${count} todo(s) left` : &quot;There are no todos&quot;}   `;   });    \/\/ \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0438 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438   observer.observe(list, {     childList: true,   });    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a   const addTodo = () =&gt; {     if (!input.value.trim()) return;      const todo = {       id: Date.now().toString().slice(-4),       text: input.value,     };      list.insertAdjacentHTML(&quot;beforeend&quot;, Item(todo));      todos.push(todo);      input.value = &quot;&quot;;     input.focus();   };    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430   const deleteTodo = (item) =&gt; {     const index = todos.findIndex((todo) =&gt; todo.id === item.id);      item.remove();      todos.splice(index, 1);   };    \/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c   form.onsubmit = (e) =&gt; e.preventDefault();    \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a   box.addEventListener(&quot;click&quot;, (e) =&gt; {     if (e.target.tagName !== &quot;BUTTON&quot;) return;      \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0438\u043f \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430     const { type } = e.target.dataset;     const item = e.target.parentElement;      \/\/ \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0443 \u0438\u043b\u0438 \u0438\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e     switch (type) {       case &quot;add&quot;:         addTodo();         break;       default:         deleteTodo(item);         break;     }   }); })(); <\/code><\/pre>\n<p>  \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<div class=\"oembed\"><iframe id=\"5f9a47382cbf1a1445b352ec\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5f9a47382cbf1a1445b352ec\"><\/iframe><\/div>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u043d\u0430\u0448\u043b\u0438 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/525536\/\"> https:\/\/habr.com\/ru\/post\/525536\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ig\/mq\/2d\/igmq2dvqrh3pvqpohaicef0c3zi.png\"><\/p>\n<p>  \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c (observer) \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0432 \u043d\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u042d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435\u043c (\u0447\u0443\u0442\u044c \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u00ab\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0441\u043b\u0435\u0436\u043a\u0430\u00bb), \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u0435\u0432\u044b\u043c. \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u0430\u043a \u043e\u0434\u043d\u043e\u0433\u043e, \u0442\u0430\u043a \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0442\u0430\u043a\u0436\u0435 \u0438 \u0437\u0430 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0412 JavaScript \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u0438\u0434\u0430 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439:<\/p>\n<ol>\n<li>ResizeObserver<\/li>\n<li>IntersectionObserver<\/li>\n<li>MutationObserver<\/li>\n<\/ol>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-312228","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=312228"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312228\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=312228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=312228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=312228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}