{"id":67765,"date":"2024-07-01T13:48:03","date_gmt":"2024-07-01T10:18:03","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/infinite-scrolling-mastering-the-intersection-observer-api-by-making-seamless-infinite-scroll-like-a-pro-379b\/"},"modified":"2024-07-01T13:48:03","modified_gmt":"2024-07-01T10:18:03","slug":"infinite-scrolling-mastering-the-intersection-observer-api-by-making-seamless-infinite-scroll-like-a-pro-379b","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/infinite-scrolling-mastering-the-intersection-observer-api-by-making-seamless-infinite-scroll-like-a-pro-379b\/","title":{"rendered":"\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a: \u062a\u0633\u0644\u0637 \u0628\u0631 Intersection Observer API \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0628\u062f\u0648\u0646 \u062f\u0631\u0632 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            \u0627\u06cc\u0646 Intersection Observer API \u0631\u0648\u0634\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 \u062a\u0642\u0627\u0637\u0639 (\u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647) \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u062c\u062f\u0627\u062f \u06cc\u0627 \u0646\u0645\u0627\u06cc \u0633\u0646\u062f \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a\u060c \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0628\u0647 \u0646\u0645\u0627\u06cc\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u0646\u0628\u0644 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0634\u0631\u0648\u0639 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0631\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0627\u0635\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0633\u062a\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0645\u06a9\u0631\u0631 \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u06cc\u06a9 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Intersection Observer API \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a vanilla ( \u0645\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 IntersectionObserver \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u062f\u06cc\u062f \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a (\u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627) \u0646\u0634\u0627\u0646 \u062f\u0647\u0645.)<\/p>\n<p>\u0645\u0627 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0644\u062d\u0638\u0647 \u0627\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u062e\u0648\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 Loading More Items \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a 100\u066a \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a\u060c \u0633\u067e\u0633 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u0633\u0627\u0633\u0627\u064b \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0641\u0639\u0644\u06cc \u0631\u0641\u062a\u0647 \u0627\u0633\u062a &#8220;\u062d\u0633\u06af\u0631&#8221; \u0627\u0633\u062a \u06cc\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0646 \u062a\u0634\u062e\u06cc\u0635 \u062a\u0648\u0633\u0637 IntersectionObserver API\u060c \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f (\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627).  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u062f\u0631\u06af\u0627\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (\u06cc\u0639\u0646\u06cc \u0646\u0645\u0627\u06cc\u0627\u0646 \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f)\u060c \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f (\u0648\u0627\u06a9\u0634\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631)<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u0628\u0627 Intersection Observer API \u0622\u0634\u0646\u0627 \u06a9\u0646\u06cc\u0645<\/p>\n<p>1. \u06cc\u06a9 IntersectionObserver \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f &#8211; \u0627\u06cc\u0646 observer \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u062a\u0645\u0627\u0634\u0627 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062flet observer = new IntersectionObserver(callbackFunc, options)<\/p>\n<p>callbackFunc  &#8211; \u0627\u06cc\u0646 \u062a\u0645\u0627\u0633 \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u0646\u0645\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u06cc\u0627 \u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u062a\u0642\u0627\u0637\u0639 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0639\u0628\u0627\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06cc\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0646\u0645\u0627\u06cc\u0627\u0646 \u0634\u062f\u0646 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f. \u0648\u0642\u062a\u06cc \u0627\u0632 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 &#8220;\u062a\u0642\u0627\u0637\u0639 \u0628\u0627 viewport&#8221; \u0635\u062d\u0628\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0645\u0646\u0638\u0648\u0631 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u062e\u0634\u06cc \u06cc\u0627 \u062a\u0645\u0627\u0645 \u0622\u0646 \u0639\u0646\u0635\u0631 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>options  &#8211; \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0634\u0631\u0627\u06cc\u0637\u06cc \u0631\u0627 \u06a9\u0647 \u062a\u062d\u062a \u0622\u0646 \u062a\u0645\u0627\u0633 \u0646\u0627\u0638\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f callbackFunc \u0628\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0627\u0644\u0641 \u0627\u062d\u0636\u0627\u0631 \u0645\u06cc \u0634\u0648\u062f \u0622\u0633\u062a\u0627\u0646\u0647.  \u0627\u06cc\u0646 \u0645\u0627\u0646\u0646\u062f \u062a\u0646\u0638\u06cc\u0645 \u0642\u0648\u0627\u0646\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0628\u0631\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a observer \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062e\u0648\u062f \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647\u060c \u0646\u06cc\u0645\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u0627 \u062d\u062a\u06cc \u06cc\u06a9 \u0627\u06cc\u0646\u0686 \u0634\u0648\u062f\u060c \u0633\u067e\u0633 \u0646\u0627\u0638\u0631 \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0647 \u0634\u0645\u0627 \u06af\u0632\u0627\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f. callbackFunc.  \u067e\u0633 \u0627\u0632 \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f<\/p>\n<p>const options = { root: null, threshold: 0.5 };<\/p>\n<p>threshold: 0.5  \u0645\u06cc \u06af\u0648\u06cc\u06cc\u0645 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 50 \u062f\u0631\u0635\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u062a\u0645\u0627\u0633 \u0628\u0631\u06af\u0634\u062a\u06cc \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f.\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 The observer\u2019s callback function \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0634\u0631\u0627\u06cc\u0637 \u062a\u0642\u0627\u0637\u0639 (\u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 threshold) \u0628\u0631\u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 root \u0628\u0627\u0637\u0644 \u0627\u0633\u062a\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0631\u0627\u062d\u062a \u0645\u06cc \u06af\u0630\u0631\u0627\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0634\u0627\u0645\u0644 \u0646\u0634\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0633\u062a root \u0628\u0647 \u0637\u0648\u0631 \u0636\u0645\u0646\u06cc \u0631\u0648\u06cc null \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u0627\u0647\u062f \u0634\u062f&#8230; NB \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u06cc\u0634\u0647 \u0631\u0627 \u0628\u0647 \u0647\u0631 \u0639\u0646\u0635\u0631\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/p>\n<p>2. \u0646\u0627\u0638\u0631 &#8211; \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 observe \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0646\u0638\u0627\u0631\u062a \/ \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u06cc\u0627 \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/p>\n<p>observer.observe(targetElement);<\/p>\n<p>observer: \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 IntersectionObserver.targetElement: \u0639\u0646\u0635\u0631 DOM \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 observe \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062e\u0627\u0635 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0648\u0642\u062a\u06cc \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f\u060c \u0628\u0647 \u0622\u0646 \u0645\u06cc \u06af\u0648\u06cc\u062f IntersectionObserver \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0648 \u06af\u0632\u0627\u0631\u0634 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u062f\u0631 viewport \u06cc\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u06cc\u0634\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u0627 \u0646\u0627\u0645\u0631\u0626\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0648\u0627\u0636\u062d \u0633\u06cc\u0645 \u06a9\u0634\u06cc \u06a9\u0646\u06cc\u0645<\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0633\u0627\u062f\u0647 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0648 \u062f\u0631 \u062d\u06cc\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<p>\u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 Html \u0633\u0627\u062f\u0647 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/p>\n<p> lang=&#8221;en&#8221;&gt;<\/p>\n<p>     charset=&#8221;UTF-8&#8243;&gt;<br \/>\n     name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<br \/>\n    Infinite Scroll Example<\/p>\n<p>        #content {<br \/>\n            max-width: 600px;<br \/>\n            margin: 0 auto;<br \/>\n        }<br \/>\n        .item {<br \/>\n            padding: 20px;<br \/>\n            border: 1px solid #ccc;<br \/>\n            margin: 10px 0;<br \/>\n        }<\/p>\n<p>     id=&#8221;content&#8221;&gt;<\/p>\n<p>     id=&#8221;loading&#8221; style=&#8221;text-align: center; margin: 20px; background-color: rgb(173, 160, 185);&#8221;&gt;<br \/>\n        Loading more items&#8230;<\/p>\n<p>    src=]]>&#8221;InfiniteScroll.js&#8221;&gt;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 InfiniteScroll.js \u0628\u0646\u0627\u0645\u06cc\u062f<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u0647\u0645 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u06a9\u0646\u06cc\u0645 \u0644\u0637\u0641\u0627\u064b \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0628\u0647 \u0627\u0633\u0646\u0627\u062f \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n<p>let currentPage = 1; \/\/ this will help us keep track of the current page of data<br \/>\nlet loading = false; \/\/ this will prevent multiple fetches of data at the same time<br \/>\nconst contentDiv = document.getElementById(&#8216;content&#8217;); \/\/ our post will be dynamically loaded here<br \/>\nconst loadingDiv = document.getElementById(&#8216;loading&#8217;); \/\/ this will be our target element<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f \u062e\u0648\u062f \u0631\u0627 \u06a9\u0647 \u0648\u0638\u06cc\u0641\u0647 \u0648\u0627\u06a9\u0634\u06cc \u067e\u0633\u062a \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u062f\u060c \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645<\/p>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10&amp;_page=${page} \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API.<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0645\u0627 URL \u067e\u0627\u06cc\u0647 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 https:\/\/jsonplaceholder.typicode.com\/posts \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0646\u0628\u0639 &#8220;\u067e\u0633\u062a&#8221; \u062f\u0631 JSONPlaceholder API \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0645\u0627 \u0646\u06cc\u0632 \u062f\u0627\u0634\u062a\u0647 \u0627\u06cc\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 ?_limit=10&amp;_page=${page}  \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0641\u06cc\u0644\u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f_limit=10  \u0627\u06cc\u0646 \u0628\u0647 API \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0647 10 \u067e\u0633\u062a \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u062f_page=${page}  \u0627\u06cc\u0646 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0635\u0641\u062d\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u0645\u062b\u0644\u0627\u060c _page=1 \u0627\u0648\u0644\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 10 \u067e\u0633\u062a\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f\u060c _page=2 10 \u067e\u0633\u062a \u0628\u0639\u062f\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u063a\u06cc\u0631\u0647. \u0645\u062a\u063a\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645<\/p>\n<p>\u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648 \u062a\u0627\u0628\u0639 \u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/p>\n<p>const getPosts = async (page) =&gt; {<br \/>\n    try {<br \/>\n        let response = await fetch(`https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10&amp;_page=${page}`);<br \/>\n        if (!response.ok) {<br \/>\n            throw new Error(&#8220;HTTP error! Status: &#8221; + response.status);<br \/>\n        }<br \/>\n        return await response.json();<br \/>\n    } catch (e) {<br \/>\n        throw new Error(&#8220;Failed to fetch services: &#8221; + e.message);<br \/>\n    }<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u062f.  \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u0645<\/p>\n<p>const appendData = (data) =&gt; {<br \/>\n    data.forEach(item =&gt; {<br \/>\n        const div = document.createElement(&#8216;div&#8217;);<br \/>\n        div.className = &#8216;item&#8217;;<br \/>\n        div.innerHTML = `${item.title}${item.body}`;<br \/>\n        contentDiv.appendChild(div);<br \/>\n    });<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0644\u0637\u0641\u0627\u064b \u062f\u0631\u0627\u0645 \u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f&#8230; \u0627\u06a9\u0646\u0648\u0646 \u062c\u0627\u062f\u0648 \u0627\u0632 \u06a9\u062c\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f<\/p>\n<p>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0627\u0638\u0631 \u062a\u0642\u0627\u0637\u0639<\/p>\n<p>const observer = new IntersectionObserver(async (entries) =&gt; {<br \/>\n    if (entries[0].isIntersecting &amp;&amp; !loading) {<\/p>\n<p>        console.log(entries)<\/p>\n<p>        loading = true;<br \/>\n        currentPage++;<br \/>\n        try {<br \/>\n            const data = await getPosts(currentPage);<br \/>\n            appendData(data);<br \/>\n        } catch (e) {<br \/>\n            console.log(e.message);<br \/>\n        }<br \/>\n        loading = false;<br \/>\n    }<br \/>\n}, { threshold: 1.0 });<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0631\u0627 \u0645\u0631\u0648\u0631 \u06a9\u0646\u06cc\u0645<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0646\u0627\u0645 \u062f\u0627\u0631\u062f observer<\/p>\n<p>const observer = new IntersectionObserver(async (entries) =&gt; {}, { threshold: 1.0 });<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0631\u0627\u0626\u0647 \u062f\u0648 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0647\u0633\u062a\u06cc\u0645 callbackFunc \u0648 options.<\/p>\n<p>\u0627\u06af\u0631 \u0641\u0642\u0637 \u0639\u0628\u0648\u0631 \u06a9\u0646\u06cc\u062f threshold option \u067e\u0633\u0646\u062f\u06cc\u062f\u0646 { threshold: 1.0 } \u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f IntersectionObserver\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 root \u0628\u0647 \u0637\u0648\u0631 \u0636\u0645\u0646\u06cc \u0631\u0648\u06cc \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0622\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a null.  \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0646\u0627\u0638\u0631 \u0627\u0632 \u0646\u0645\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f root \u0628\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u062f\u06cc\u062f 1.0 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0647\u062f\u0641 100\u066a \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0627 \u0634\u0645\u0627\u0631\u0647 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f callbackFUnc \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647<\/p>\n<p>\u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 2 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0645\u06cc \u06af\u06cc\u0631\u062f entries \u0648 observer \u06a9\u0647 \u062e\u0648\u062f InstersectionObserver \u0627\u0633\u062a.  \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627 \u0645\u0627 \u0641\u0642\u0637 \u0627\u0632 \u0622\u0646 \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 entries \u0628\u062d\u062b \u0648 \u062c\u062f\u0644.<\/p>\n<p>\u0627\u06cc\u0646 \u0686\u06cc\u0647 entries??\u060c \u0627\u06cc\u0646 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 IntersectionObserverEntry \u0627\u0634\u06cc\u0627\u0621.  \u0647\u0631 \u0648\u0631\u0648\u062f\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \/ \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062d\u0627\u0648\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u0642\u0627\u0637\u0639 \u0622\u0646 \u0628\u0627 \u0631\u06cc\u0634\u0647 \/ \u06cc\u0627 \u0647\u0631 \u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a. <\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062e\u0648\u062f \u06a9\u0646\u06cc\u0645 \u0633\u067e\u0633 \u0628\u0647 \u062a\u0648\u0636\u06cc\u062d \u0628\u0627\u0644\u0627 \u0628\u0631\u06af\u0631\u062f\u06cc\u0645\u060c \u0645\u0646\u0637\u0642\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/p>\n<p>observer.observe(loadingDiv);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 observe \u0645\u062a\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0628\u0647 \u0622\u0646 \u0645\u06cc \u06af\u0648\u06cc\u062f IntersectionObserver \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f \u06af\u0632\u0627\u0631\u0634 \u062f\u0647\u06cc\u062f 100% \u06cc\u0627 1.0 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u06cc\u0645 threshold \u0628\u0647 \u0622\u0646<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u06cc\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0622\u0633\u062a\u0627\u0646\u0647 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c callback function \u0628\u0627 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f IntersectionObserverEntry \u0627\u0634\u06cc\u0627\u0621 \u0648 \u0645\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062f\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062a\u0642\u0627\u0637\u0639 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062a\u0627\u0628\u0639 callback \u0628\u0627\u0644\u0627\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0627 console.log(entries) \u0645\u0627 \u0686\u06cc\u0632\u06cc \u0645\u0627\u0646\u0646\u062f \u0632\u06cc\u0631 \u062f\u0627\u0631\u06cc\u0645.  \u0634\u0645\u0627 \u0628\u0647 \u0648\u0636\u0648\u062d \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0631\u0648\u062f\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 (\u0639\u0646\u0635\u0631 \u0647\u062f\u0641) \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062d\u0627\u0648\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u0642\u0627\u0637\u0639 \u0622\u0646 \u0628\u0627 \u0631\u06cc\u0634\u0647 \u0627\u0633\u062a.\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0622\u0631\u0627\u06cc\u0647 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u0645\u0627 \u0641\u0642\u0637 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a IntersectionObserverEntry \u0647\u062f\u0641 &#8211; \u0634\u06cc.<\/p>\n<p>\u0645\u0627 \u062f\u0627\u0631\u06cc\u0645 time: \u0627\u06cc\u0646 \u0645\u0647\u0631 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u062a\u0642\u0627\u0637\u0639 \u0631\u062e \u062f\u0627\u062f\u0647 \u0627\u0633\u062a \/ \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a<br \/>\n\u0645\u0627 \u062f\u0627\u0631\u06cc\u0645 target: \u0627\u06cc\u0646 \u062e\u0648\u062f \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.boundingClientRect: \u0645\u0648\u0642\u0639\u06cc\u062a \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647<\/p>\n<p>intersectionRect:  \u0633\u0637\u062d \u062a\u0642\u0627\u0637\u0639 \u0646\u0633\u0628\u062a \u0628\u0647 \u0631\u06cc\u0634\u0647<br \/>\n rootBounds:  \u0627\u0646\u062f\u0627\u0632\u0647 \u0631\u06cc\u0634\u0647 (\u0646\u0645\u0627\u06cc\u0634\u06af\u0627\u0647) \/ \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631<\/p>\n<p>isIntersecting: \u06cc\u06a9 \u0628\u0648\u0644\u06cc \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0622\u06cc\u0627 \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0622\u0633\u062a\u0627\u0646\u0647 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0628\u0627 \u0631\u06cc\u0634\u0647 (\u06cc\u0627 \u062f\u0631\u06af\u0627\u0647 \u062f\u06cc\u062f) \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (\u062e\u0648\u0627\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u062f).<\/p>\n<p>\u0633\u067e\u0633 \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u0627\u0628\u0639 callback\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n<p>(entries[0].isIntersecting &amp;&amp; !loading): \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0627\u0648\u0644\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631 (entries[0]) \u0628\u0627 \u062f\u0631\u06af\u0627\u0647 \u062f\u06cc\u062f \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (isIntersecting is true) \u0648 \u0622\u0646 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f loading \u0627\u0633\u062afalse \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0648\u0627\u06a9\u0634\u06cc \u0686\u0646\u062f\u06cc\u0646 \u067e\u0633\u062a \u0647\u0645\u0632\u0645\u0627\u0646.<\/p>\n<p>loading = true:  \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0647\u0633\u062a\u06cc\u0645 loading \u067e\u0631\u0686\u0645 \u0628\u0647 true \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0633\u062a.<\/p>\n<p>currentPage++:  \u062f\u0631 \u062d\u0627\u0644 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0633\u062a currentPage \u0645\u062a\u063a\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0635\u0641\u062d\u0647 \u0628\u0639\u062f\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627.<\/p>\n<p>const data = await getServices(currentPage): \u0645\u0627 \u062a\u0627\u0628\u0639 getPosts \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u067e\u0633\u062a\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a\u0647 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p>appendData(data): \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 (\u062f\u0627\u062f\u0647\u200c\u0647\u0627) \u0631\u0627 \u0628\u0647 DOM \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 appendData \u062a\u0627\u0628\u0639.<\/p>\n<p>loading = false: \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u067e\u0631\u0686\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u0647 false \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0627\u0644\u062d\u0627\u0642 \u067e\u0633\u062a \u0647\u0627  \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 loadingDiv \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0627 viewport \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (\u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f) \u0648\u0627\u06a9\u0634\u06cc \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0631\u062e \u062f\u0647\u062f.<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645 \u067e\u06cc\u0634\u0631\u0641\u062a \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0646\u0638\u0627\u0631\u062a \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0645\u0627 Window Event Lister \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645:<\/p>\n<p>window.addEventListener(&#8216;DOMContentLoaded&#8217;, async () =&gt; {<br \/>\n    try {<br \/>\n        const posts = await getPosts(currentPage);<br \/>\n        if (posts) {<br \/>\n            appendData(posts);<br \/>\n        } else {<br \/>\n            console.log(&#8216;posts not found or undefined&#8217;);<br \/>\n        }<br \/>\n    } catch (e) {<br \/>\n        console.log(e.message);<br \/>\n    }<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0632\u0645\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc DOM \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.  \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647\u060c getPosts \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f (currentPage = 1) \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 appendData \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<p>\u06a9\u062f \u06a9\u0627\u0645\u0644<\/p>\n<p>let currentPage = 1; \/\/ this will help us keep track of the current page of data<br \/>\nlet loading = false; \/\/ this will prevent multiple fetches of data at the same time<br \/>\nconst contentDiv = document.getElementById(&#8216;content&#8217;); \/\/ our post will be dynamically loaded here<br \/>\nconst loadingDiv = document.getElementById(&#8216;loading&#8217;); \/\/ this will be our target element<\/p>\n<p>const getPosts = async (page) =&gt; {<br \/>\n    try {<br \/>\n        let response = await fetch(`https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10&amp;_page=${page}`);<br \/>\n        if (!response.ok) {<br \/>\n            throw new Error(&#8220;HTTP error! Status: &#8221; + response.status);<br \/>\n        }<br \/>\n        return await response.json();<br \/>\n    } catch (e) {<br \/>\n        throw new Error(&#8220;Failed to fetch services: &#8221; + e.message);<br \/>\n    }<br \/>\n}<\/p>\n<p>const appendData = (data) =&gt; {<br \/>\n    data.forEach(item =&gt; {<br \/>\n        const div = document.createElement(&#8216;div&#8217;);<br \/>\n        div.className = &#8216;item&#8217;;<br \/>\n        div.innerHTML = `${item.title}${item.body}`;<br \/>\n        contentDiv.appendChild(div);<br \/>\n    });<br \/>\n}<\/p>\n<p>const observer = new IntersectionObserver(async (entries) =&gt; {<br \/>\n    if (entries[0].isIntersecting &amp;&amp; !loading) {<\/p>\n<p>        console.log(entries)<\/p>\n<p>        loading = true;<br \/>\n        currentPage++;<br \/>\n        try {<br \/>\n            const data = await getPosts(currentPage);<br \/>\n            appendData(data);<br \/>\n        } catch (e) {<br \/>\n            console.log(e.message);<br \/>\n        }<br \/>\n        loading = false;<br \/>\n    }<br \/>\n}, { threshold: 1.0 });<\/p>\n<p>observer.observe(loadingDiv);<\/p>\n<p>window.addEventListener(&#8216;DOMContentLoaded&#8217;, async () =&gt; {<br \/>\n    try {<br \/>\n        const posts = await getPosts(currentPage);<br \/>\n        if (posts) {<br \/>\n            appendData(posts);<br \/>\n        } else {<br \/>\n            console.log(&#8216;posts not found or undefined&#8217;);<br \/>\n        }<br \/>\n    } catch (e) {<br \/>\n        console.log(e.message);<br \/>\n    }<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c API \u0642\u062f\u0631\u062a\u0645\u0646\u062f IntersectionObserver \u0648 \u0646\u0642\u0634 \u0622\u0646 \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 API\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u062e\u0648\u062f \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u067e\u0648\u06cc\u0627\u062a\u0631 \u0648 \u062c\u0630\u0627\u0628 \u062a\u0631 \u06a9\u0646\u06cc\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062e\u0644\u0627\u0635\u0647 \u0627\u06cc \u0627\u0632 \u0622\u0646\u0686\u0647 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u06cc\u0645 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n<p>\u0645\u0641\u0627\u0647\u06cc\u0645 \u06a9\u0644\u06cc\u062f\u06cc:<\/p>\n<p>IntersectionObserver API:<\/p>\n<p>\u0631\u0648\u0634\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u062f\u06cc\u062f \u0639\u0646\u0627\u0635\u0631 \u0647\u062f\u0641 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0646\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0641\u0631\u0622\u06cc\u0646\u062f \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0631\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0627\u0635\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0633\u062a\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0645\u06a9\u0631\u0631 \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc\u200c\u0628\u0631\u062f.<\/p>\n<p>\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a:<\/p>\n<p>\u0627\u0645\u06a9\u0627\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062f\u0627\u0648\u0645 \u0645\u062d\u062a\u0648\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062c\u0631\u06cc\u0627\u0646\u06cc \u062b\u0627\u0628\u062a \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u062c\u062f\u062f \u0635\u0641\u062d\u0647 \u06cc\u0627 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u062f\u0633\u062a\u06cc\u060c \u062a\u062c\u0631\u0628\u0647 \u0645\u0631\u0648\u0631 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f.<\/p>\n<p>\u062a\u0648\u0627\u0628\u0639 \u0648 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633:<\/p>\n<p>\u0627\u06cc\u0646 callbackFunc \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062f\u06cc\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0622\u0633\u062a\u0627\u0646\u0647 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f.\u0627\u06cc\u0646 options \u0634\u06cc \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0631\u0641\u062a\u0627\u0631 \u0646\u0627\u0638\u0631 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u062a\u0639\u06cc\u06cc\u0646 \u0631\u06cc\u0634\u0647 \u0648 \u0622\u0633\u062a\u0627\u0646\u0647.<\/p>\n<p>\u0646\u062a\u06cc\u062c\u0647<\/p>\n<p>\u0628\u0627 \u062a\u0633\u0644\u0637 \u0628\u0631 IntersectionObserver API\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u062c\u0631\u0628\u0647 \u0627\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f.  \u0686\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0641\u06cc\u062f \u062e\u0628\u0631\u06cc\u060c \u06cc\u06a9 \u0633\u0627\u06cc\u062a \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u060c \u06cc\u0627 \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0646\u06af\u06cc\u0646\u06cc \u062f\u0627\u0631\u062f\u060c \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 IntersectionObserver \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631\u06af\u06cc\u0631 \u0645\u06cc\u200c\u0645\u0627\u0646\u0646\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u06a9\u0627\u0631\u0622\u0645\u062f\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f\u060c \u0648\u0627\u0631\u062f \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u062e\u0648\u062f \u0634\u0648\u06cc\u062f \u0648 \u0627\u0632 \u0647\u0645\u06cc\u0646 \u0627\u0645\u0631\u0648\u0632 \u0634\u0631\u0648\u0639 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u06a9\u0646\u06cc\u062f.  \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0627\u0632 \u062a\u062c\u0631\u0628\u0647 \u0645\u0631\u0648\u0631 \u0631\u0648\u0627\u0646 \u0648 \u0645\u062f\u0627\u0648\u0645 \u0634\u0645\u0627 \u062a\u0634\u06a9\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u06a9\u0631\u062f!<\/p>\n<div data-article-id=\"1905589\" id=\"article-body\">\n<p>\u0627\u06cc\u0646 <strong>Intersection Observer API<\/strong> \u0631\u0648\u0634\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 \u062a\u0642\u0627\u0637\u0639 (\u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647) \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u062c\u062f\u0627\u062f \u06cc\u0627 \u0646\u0645\u0627\u06cc \u0633\u0646\u062f \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a\u060c \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0628\u0647 \u0646\u0645\u0627\u06cc\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u0646\u0628\u0644 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p><em>\u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0634\u0631\u0648\u0639 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0631\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0627\u0635\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0633\u062a\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0645\u06a9\u0631\u0631 \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/em><br \/><\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u06cc\u06a9 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Intersection Observer API \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a vanilla ( <strong><em>\u0645\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 IntersectionObserver \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u062f\u06cc\u062f \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a (\u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627) \u0646\u0634\u0627\u0646 \u062f\u0647\u0645.<\/em><\/strong>)<\/p>\n<p>\u0645\u0627 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0644\u062d\u0638\u0647 \u0627\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u062e\u0648\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 <code>Loading More Items<\/code> \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a 100\u066a \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a\u060c \u0633\u067e\u0633 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u0633\u0627\u0633\u0627\u064b \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0641\u0639\u0644\u06cc \u0631\u0641\u062a\u0647 \u0627\u0633\u062a &#8220;\u062d\u0633\u06af\u0631&#8221; \u0627\u0633\u062a \u06cc\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0646 \u062a\u0634\u062e\u06cc\u0635 \u062a\u0648\u0633\u0637 <code>IntersectionObserver API<\/code>\u060c \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f (\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627).  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u062f\u0631\u06af\u0627\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (\u06cc\u0639\u0646\u06cc \u0646\u0645\u0627\u06cc\u0627\u0646 \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f)\u060c \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f (\u0648\u0627\u06a9\u0634\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631)<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7svhwm9obmca3cv8yrsz.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"368\" height=\"587\" title=\"\"><\/p>\n<p><strong>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u0628\u0627 Intersection Observer API \u0622\u0634\u0646\u0627 \u06a9\u0646\u06cc\u0645<\/strong><\/p>\n<p><strong>1. \u06cc\u06a9 IntersectionObserver \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong> &#8211; \u0627\u06cc\u0646 <code>observer<\/code> \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u062a\u0645\u0627\u0634\u0627 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f<br \/><code>let observer = new IntersectionObserver(callbackFunc, options)<\/code><\/p>\n<p><code>callbackFunc<\/code>  &#8211; \u0627\u06cc\u0646 \u062a\u0645\u0627\u0633 \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u0646\u0645\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u06cc\u0627 \u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u062a\u0642\u0627\u0637\u0639 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0639\u0628\u0627\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06cc\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0646\u0645\u0627\u06cc\u0627\u0646 \u0634\u062f\u0646 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f. <em>\u0648\u0642\u062a\u06cc \u0627\u0632 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 &#8220;\u062a\u0642\u0627\u0637\u0639 \u0628\u0627 viewport&#8221; \u0635\u062d\u0628\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0645\u0646\u0638\u0648\u0631 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u062e\u0634\u06cc \u06cc\u0627 \u062a\u0645\u0627\u0645 \u0622\u0646 \u0639\u0646\u0635\u0631 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a.<\/em><\/p>\n<p><code>options<\/code>  &#8211; \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0634\u0631\u0627\u06cc\u0637\u06cc \u0631\u0627 \u06a9\u0647 \u062a\u062d\u062a \u0622\u0646 \u062a\u0645\u0627\u0633 \u0646\u0627\u0638\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f <code>callbackFunc<\/code> \u0628\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0627\u0644\u0641 \u0627\u062d\u0636\u0627\u0631 \u0645\u06cc \u0634\u0648\u062f <strong>\u0622\u0633\u062a\u0627\u0646\u0647<\/strong>.  \u0627\u06cc\u0646 \u0645\u0627\u0646\u0646\u062f \u062a\u0646\u0638\u06cc\u0645 \u0642\u0648\u0627\u0646\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0628\u0631\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a <code>observer<\/code> \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062e\u0648\u062f \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647\u060c \u0646\u06cc\u0645\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u0627 \u062d\u062a\u06cc \u06cc\u06a9 \u0627\u06cc\u0646\u0686 \u0634\u0648\u062f\u060c \u0633\u067e\u0633 \u0646\u0627\u0638\u0631 \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0647 \u0634\u0645\u0627 \u06af\u0632\u0627\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f. <code>callbackFunc<\/code>.  \u067e\u0633 \u0627\u0632 \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f<\/p>\n<p><code>const options = { root: null, threshold: 0.5 };<\/code><\/p>\n<p><code>threshold: 0.5<\/code>  \u0645\u06cc \u06af\u0648\u06cc\u06cc\u0645 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 50 \u062f\u0631\u0635\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u062a\u0645\u0627\u0633 \u0628\u0631\u06af\u0634\u062a\u06cc \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f.<br \/>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 The <code>observer\u2019s callback function<\/code> \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0634\u0631\u0627\u06cc\u0637 \u062a\u0642\u0627\u0637\u0639 (\u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 <code>threshold<\/code>) \u0628\u0631\u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 <code>root<\/code> \u0628\u0627\u0637\u0644 \u0627\u0633\u062a\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0631\u0627\u062d\u062a \u0645\u06cc \u06af\u0630\u0631\u0627\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0634\u0627\u0645\u0644 \u0646\u0634\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0633\u062a <code>root<\/code> \u0628\u0647 \u0637\u0648\u0631 \u0636\u0645\u0646\u06cc \u0631\u0648\u06cc null \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u0627\u0647\u062f \u0634\u062f&#8230; <strong>NB<\/strong> \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u06cc\u0634\u0647 \u0631\u0627 \u0628\u0647 \u0647\u0631 \u0639\u0646\u0635\u0631\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/p>\n<p><strong>2. \u0646\u0627\u0638\u0631<\/strong> &#8211; \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>observe<\/code> \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0646\u0638\u0627\u0631\u062a \/ \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u06cc\u0627 \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/p>\n<p><code>observer.observe(targetElement);<\/code><\/p>\n<p><code>observer<\/code>: \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 <code>IntersectionObserver<\/code>.<br \/><code>targetElement<\/code>: \u0639\u0646\u0635\u0631 DOM \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 <code>observe<\/code> \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062e\u0627\u0635 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0648\u0642\u062a\u06cc \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f\u060c \u0628\u0647 \u0622\u0646 \u0645\u06cc \u06af\u0648\u06cc\u062f <code>IntersectionObserver<\/code> \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0648 \u06af\u0632\u0627\u0631\u0634 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u062f\u0631 viewport \u06cc\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u06cc\u0634\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06cc\u0627 \u0646\u0627\u0645\u0631\u0626\u06cc \u0634\u0648\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6jjcsjdmzg9ks9476y7i.jpeg\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"200\" height=\"186\" title=\"\"><br \/><strong>\u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0648\u0627\u0636\u062d \u0633\u06cc\u0645 \u06a9\u0634\u06cc \u06a9\u0646\u06cc\u0645<\/strong><\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0633\u0627\u062f\u0647 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0648 \u062f\u0631 \u062d\u06cc\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<ol>\n<li>\n<strong>\u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 Html \u0633\u0627\u062f\u0647 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/strong>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\">\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><title\/><\/span>Infinite Scroll Example<span class=\"nt\"\/>\n    <span class=\"nt\"\/>\n        <span class=\"nf\">#content<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">600px<\/span><span class=\"p\">;<\/span>\n            <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"nc\">.item<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n            <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">#ccc<\/span><span class=\"p\">;<\/span>\n            <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n    <span class=\"nt\"><p> <span class=\"na\">id=<\/span><span class=\"s\">\"content\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"c\"><!-- Posts will be dynamically loaded here --><\/span>\n    <span class=\"nt\"\/><\/p><\/span>\n\n    <span class=\"c\"><!-- This will be our target element --><\/span>\n    <span class=\"nt\"><p> <span class=\"na\">id=<\/span><span class=\"s\">\"loading\"<\/span> <span class=\"na\">style=<\/span><span class=\"s\">\"text-align: center; margin: 20px; background-color: rgb(173, 160, 185);\"<\/span><span class=\"nt\">&gt;<\/span>\n        Loading more items...\n    <span class=\"nt\"\/><\/p><\/span>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"InfiniteScroll.js\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li><strong>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 InfiniteScroll.js \u0628\u0646\u0627\u0645\u06cc\u062f<\/strong><\/li>\n<\/ol>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u0647\u0645 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u06a9\u0646\u06cc\u0645 <br \/><em><strong>\u0644\u0637\u0641\u0627\u064b \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0628\u0647 \u0627\u0633\u0646\u0627\u062f \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f<\/strong><\/em><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">let<\/span> <span class=\"nx\">currentPage<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ this will help us keep track of the current page of data<\/span>\n<span class=\"kd\">let<\/span> <span class=\"nx\">loading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ this will prevent multiple fetches of data at the same time<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">contentDiv<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">content<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ our post will be dynamically loaded here<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">loadingDiv<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">loading<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ this will be our target element<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f \u062e\u0648\u062f \u0631\u0627 \u06a9\u0647 \u0648\u0638\u06cc\u0641\u0647 \u0648\u0627\u06a9\u0634\u06cc \u067e\u0633\u062a \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u062f\u060c \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645<\/p>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10&amp;_page=${page}<\/code> \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API.<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0645\u0627 URL \u067e\u0627\u06cc\u0647 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>https:\/\/jsonplaceholder.typicode.com\/posts<\/code> \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0646\u0628\u0639 &#8220;\u067e\u0633\u062a&#8221; \u062f\u0631 JSONPlaceholder API \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0645\u0627 \u0646\u06cc\u0632 \u062f\u0627\u0634\u062a\u0647 \u0627\u06cc\u0645 <strong>\u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648<\/strong> <code>?_limit=10&amp;_page=${page}<\/code>  \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0641\u06cc\u0644\u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f<br \/><code>_limit=10<\/code>  \u0627\u06cc\u0646 \u0628\u0647 API \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0647 10 \u067e\u0633\u062a \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u062f<br \/><code>_page=${page}<\/code>  \u0627\u06cc\u0646 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0635\u0641\u062d\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u0645\u062b\u0644\u0627\u060c <code>_page=1<\/code> \u0627\u0648\u0644\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 10 \u067e\u0633\u062a\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f\u060c <code>_page=2<\/code> 10 \u067e\u0633\u062a \u0628\u0639\u062f\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u063a\u06cc\u0631\u0647. <strong>\u0645\u062a\u063a\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645<\/strong><\/p>\n<p>\u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648 \u062a\u0627\u0628\u0639 \u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">getPosts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">page<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">let<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10&amp;_page=<\/span><span class=\"p\">${<\/span><span class=\"nx\">page<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">HTTP error! Status: <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">status<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"k\">return<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Failed to fetch services: <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u062f.  \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u0645\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">appendData<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">div<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">div<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">item<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">div<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`<h3\/><\/span><span class=\"p\">${<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"s2\"\/><span class=\"p\">${<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">contentDiv<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">div<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0644\u0637\u0641\u0627\u064b \u062f\u0631\u0627\u0645 \u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f&#8230; \u0627\u06a9\u0646\u0648\u0646 \u062c\u0627\u062f\u0648 \u0627\u0632 \u06a9\u062c\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f<\/strong><\/p>\n<ul>\n<li>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0627\u0638\u0631 \u062a\u0642\u0627\u0637\u0639\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">observer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">IntersectionObserver<\/span><span class=\"p\">(<\/span><span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">entries<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">entries<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">isIntersecting<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">entries<\/span><span class=\"p\">)<\/span>\n\n        <span class=\"nx\">loading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">currentPage<\/span><span class=\"o\">++<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">getPosts<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentPage<\/span><span class=\"p\">);<\/span>\n            <span class=\"nf\">appendData<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"nx\">loading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">threshold<\/span><span class=\"p\">:<\/span> <span class=\"mf\">1.0<\/span> <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0631\u0627 \u0645\u0631\u0648\u0631 \u06a9\u0646\u06cc\u0645<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0646\u0627\u0645 \u062f\u0627\u0631\u062f <code>observer<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">observer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">IntersectionObserver<\/span><span class=\"p\">(<\/span><span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">entries<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">threshold<\/span><span class=\"p\">:<\/span> <span class=\"mf\">1.0<\/span> <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0631\u0627\u0626\u0647 \u062f\u0648 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0647\u0633\u062a\u06cc\u0645 <code>callbackFunc<\/code> \u0648 <code>options<\/code>.<\/p>\n<p>\u0627\u06af\u0631 \u0641\u0642\u0637 \u0639\u0628\u0648\u0631 \u06a9\u0646\u06cc\u062f <code>threshold option<\/code> \u067e\u0633\u0646\u062f\u06cc\u062f\u0646 <code>{ threshold: 1.0 }<\/code> \u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f IntersectionObserver\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 <code>root<\/code> \u0628\u0647 \u0637\u0648\u0631 \u0636\u0645\u0646\u06cc \u0631\u0648\u06cc \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0622\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a <code>null<\/code>.  \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0646\u0627\u0638\u0631 \u0627\u0632 \u0646\u0645\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f <code>root<\/code> \u0628\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u062f\u06cc\u062f <code>1.0<\/code> \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0647\u062f\u0641 100\u066a \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0627 \u0634\u0645\u0627\u0631\u0647 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>callbackFUnc<\/code> \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647<\/p>\n<p>\u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 2 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>entries<\/code> \u0648 <code>observer<\/code> \u06a9\u0647 \u062e\u0648\u062f InstersectionObserver \u0627\u0633\u062a.  \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627 \u0645\u0627 \u0641\u0642\u0637 \u0627\u0632 \u0622\u0646 \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>entries<\/code> \u0628\u062d\u062b \u0648 \u062c\u062f\u0644.<\/p>\n<p>\u0627\u06cc\u0646 \u0686\u06cc\u0647 <code>entries<\/code>??\u060c \u0627\u06cc\u0646 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 <code>IntersectionObserverEntry<\/code> \u0627\u0634\u06cc\u0627\u0621.  \u0647\u0631 \u0648\u0631\u0648\u062f\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \/ \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062d\u0627\u0648\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u0642\u0627\u0637\u0639 \u0622\u0646 \u0628\u0627 \u0631\u06cc\u0634\u0647 \/ \u06cc\u0627 \u0647\u0631 \u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a. <\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062e\u0648\u062f \u06a9\u0646\u06cc\u0645 \u0633\u067e\u0633 \u0628\u0647 \u062a\u0648\u0636\u06cc\u062d \u0628\u0627\u0644\u0627 \u0628\u0631\u06af\u0631\u062f\u06cc\u0645\u060c \u0645\u0646\u0637\u0642\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">observer<\/span><span class=\"p\">.<\/span><span class=\"nf\">observe<\/span><span class=\"p\">(<\/span><span class=\"nx\">loadingDiv<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>observe<\/code> \u0645\u062a\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0628\u0647 \u0622\u0646 \u0645\u06cc \u06af\u0648\u06cc\u062f <code>IntersectionObserver<\/code> \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc <strong>\u0639\u0646\u0635\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647<\/strong> \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f \u06af\u0632\u0627\u0631\u0634 \u062f\u0647\u06cc\u062f <code>100%<\/code> \u06cc\u0627 <code>1.0<\/code> \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u06cc\u0645 <code>threshold<\/code> \u0628\u0647 \u0622\u0646<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u06cc\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0622\u0633\u062a\u0627\u0646\u0647 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c <code>callback function<\/code> \u0628\u0627 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f <code>IntersectionObserverEntry<\/code> \u0627\u0634\u06cc\u0627\u0621 \u0648 \u0645\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062f\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062a\u0642\u0627\u0637\u0639 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062a\u0627\u0628\u0639 callback \u0628\u0627\u0644\u0627\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0627 <code>console.log(entries)<\/code> \u0645\u0627 \u0686\u06cc\u0632\u06cc \u0645\u0627\u0646\u0646\u062f \u0632\u06cc\u0631 \u062f\u0627\u0631\u06cc\u0645.  \u0634\u0645\u0627 \u0628\u0647 \u0648\u0636\u0648\u062d \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0631\u0648\u062f\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 (\u0639\u0646\u0635\u0631 \u0647\u062f\u0641) \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062d\u0627\u0648\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u0642\u0627\u0637\u0639 \u0622\u0646 \u0628\u0627 \u0631\u06cc\u0634\u0647 \u0627\u0633\u062a.<strong>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0622\u0631\u0627\u06cc\u0647 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u0645\u0627 \u0641\u0642\u0637 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a <code>IntersectionObserverEntry<\/code> \u0647\u062f\u0641 &#8211; \u0634\u06cc.<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fguqwh4m47ggouzsgqldr.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"413\" title=\"\"><\/p>\n<ol>\n<li>\u0645\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>time<\/code>: \u0627\u06cc\u0646 \u0645\u0647\u0631 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u062a\u0642\u0627\u0637\u0639 \u0631\u062e \u062f\u0627\u062f\u0647 \u0627\u0633\u062a \/ \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a<\/li>\n<li>\u0645\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>target<\/code>: \u0627\u06cc\u0646 \u062e\u0648\u062f \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<code>boundingClientRect<\/code>: \u0645\u0648\u0642\u0639\u06cc\u062a \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647<\/li>\n<li>\n<code>intersectionRect:<\/code>  \u0633\u0637\u062d \u062a\u0642\u0627\u0637\u0639 \u0646\u0633\u0628\u062a \u0628\u0647 \u0631\u06cc\u0634\u0647<\/li>\n<li> <code>rootBounds:<\/code>  \u0627\u0646\u062f\u0627\u0632\u0647 \u0631\u06cc\u0634\u0647 (\u0646\u0645\u0627\u06cc\u0634\u06af\u0627\u0647) \/ \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631<\/li>\n<li>\n<code>isIntersecting<\/code>: \u06cc\u06a9 \u0628\u0648\u0644\u06cc \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0622\u06cc\u0627 \u0639\u0646\u0635\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0622\u0633\u062a\u0627\u0646\u0647 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0628\u0627 \u0631\u06cc\u0634\u0647 (\u06cc\u0627 \u062f\u0631\u06af\u0627\u0647 \u062f\u06cc\u062f) \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (\u062e\u0648\u0627\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u062f).<\/li>\n<\/ol>\n<p>\u0633\u067e\u0633 \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u0627\u0628\u0639 callback\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n<p><code>(entries[0].isIntersecting &amp;&amp; !loading)<\/code>: \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0627\u0648\u0644\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631 <code>(entries[0])<\/code> \u0628\u0627 \u062f\u0631\u06af\u0627\u0647 \u062f\u06cc\u062f \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (<code>isIntersecting is true<\/code>) \u0648 \u0622\u0646 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f <code>loading<\/code> \u0627\u0633\u062a<code>false<\/code> \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0648\u0627\u06a9\u0634\u06cc \u0686\u0646\u062f\u06cc\u0646 \u067e\u0633\u062a \u0647\u0645\u0632\u0645\u0627\u0646.<\/p>\n<p><code>loading = true:<\/code>  \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0647\u0633\u062a\u06cc\u0645 <code>loading<\/code> \u067e\u0631\u0686\u0645 \u0628\u0647 <code>true<\/code> \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0633\u062a.<\/p>\n<p><code>currentPage++:<\/code>  \u062f\u0631 \u062d\u0627\u0644 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0633\u062a <code>currentPage<\/code> \u0645\u062a\u063a\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0635\u0641\u062d\u0647 \u0628\u0639\u062f\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627.<\/p>\n<p><code>const data = await getServices(currentPage)<\/code>: \u0645\u0627 \u062a\u0627\u0628\u0639 getPosts \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u067e\u0633\u062a\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a\u0647 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p><code>appendData(data)<\/code>: \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 (\u062f\u0627\u062f\u0647\u200c\u0647\u0627) \u0631\u0627 \u0628\u0647 DOM \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>appendData<\/code> \u062a\u0627\u0628\u0639.<\/p>\n<p><code>loading = false<\/code>: \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u067e\u0631\u0686\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u0647 <code>false<\/code> \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0627\u0644\u062d\u0627\u0642 \u067e\u0633\u062a \u0647\u0627  \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 loadingDiv \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0627 viewport \u062a\u0644\u0627\u0642\u06cc \u0645\u06cc \u06a9\u0646\u062f (\u06a9\u0627\u0645\u0644\u0627\u064b \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f) \u0648\u0627\u06a9\u0634\u06cc \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0631\u062e \u062f\u0647\u062f.<\/p>\n<p><strong>\u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645 \u067e\u06cc\u0634\u0631\u0641\u062a \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0646\u0638\u0627\u0631\u062a \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvega5tv4rp8bbmgo8llg.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"218\" title=\"\"><\/p>\n<p><strong>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0645\u0627 Window Event Lister \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">DOMContentLoaded<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">posts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">getPosts<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentPage<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">posts<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nf\">appendData<\/span><span class=\"p\">(<\/span><span class=\"nx\">posts<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">posts not found or undefined<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0632\u0645\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc DOM \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.  \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647\u060c getPosts \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f (<code>currentPage = 1<\/code>) \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 appendData \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<p><strong>\u06a9\u062f \u06a9\u0627\u0645\u0644<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">let<\/span> <span class=\"nx\">currentPage<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ this will help us keep track of the current page of data<\/span>\n<span class=\"kd\">let<\/span> <span class=\"nx\">loading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ this will prevent multiple fetches of data at the same time<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">contentDiv<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">content<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ our post will be dynamically loaded here<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">loadingDiv<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">loading<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ this will be our target element<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">getPosts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">page<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">let<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10&amp;_page=<\/span><span class=\"p\">${<\/span><span class=\"nx\">page<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">HTTP error! Status: <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">status<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"k\">return<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Failed to fetch services: <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">appendData<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">div<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">div<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">item<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">div<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`<h3\/><\/span><span class=\"p\">${<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"s2\"\/><span class=\"p\">${<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">contentDiv<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">div<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">observer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">IntersectionObserver<\/span><span class=\"p\">(<\/span><span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">entries<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">entries<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">isIntersecting<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">entries<\/span><span class=\"p\">)<\/span>\n\n        <span class=\"nx\">loading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">currentPage<\/span><span class=\"o\">++<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">getPosts<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentPage<\/span><span class=\"p\">);<\/span>\n            <span class=\"nf\">appendData<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"nx\">loading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">threshold<\/span><span class=\"p\">:<\/span> <span class=\"mf\">1.0<\/span> <span class=\"p\">});<\/span>\n\n<span class=\"nx\">observer<\/span><span class=\"p\">.<\/span><span class=\"nf\">observe<\/span><span class=\"p\">(<\/span><span class=\"nx\">loadingDiv<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">DOMContentLoaded<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">posts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">getPosts<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentPage<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">posts<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nf\">appendData<\/span><span class=\"p\">(<\/span><span class=\"nx\">posts<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">posts not found or undefined<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">});<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<\/strong><\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c API \u0642\u062f\u0631\u062a\u0645\u0646\u062f IntersectionObserver \u0648 \u0646\u0642\u0634 \u0622\u0646 \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 API\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u062e\u0648\u062f \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u067e\u0648\u06cc\u0627\u062a\u0631 \u0648 \u062c\u0630\u0627\u0628 \u062a\u0631 \u06a9\u0646\u06cc\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062e\u0644\u0627\u0635\u0647 \u0627\u06cc \u0627\u0632 \u0622\u0646\u0686\u0647 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u06cc\u0645 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n<p><strong>\u0645\u0641\u0627\u0647\u06cc\u0645 \u06a9\u0644\u06cc\u062f\u06cc:<\/strong><\/p>\n<p><strong>IntersectionObserver API:<\/strong><\/p>\n<p>\u0631\u0648\u0634\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u062f\u06cc\u062f \u0639\u0646\u0627\u0635\u0631 \u0647\u062f\u0641 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0646\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0641\u0631\u0622\u06cc\u0646\u062f \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0631\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0627\u0635\u0631 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0633\u062a\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0645\u06a9\u0631\u0631 \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc\u200c\u0628\u0631\u062f.<\/p>\n<p><strong>\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a:<\/strong><\/p>\n<p>\u0627\u0645\u06a9\u0627\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062f\u0627\u0648\u0645 \u0645\u062d\u062a\u0648\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062c\u0631\u06cc\u0627\u0646\u06cc \u062b\u0627\u0628\u062a \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u062c\u062f\u062f \u0635\u0641\u062d\u0647 \u06cc\u0627 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u062f\u0633\u062a\u06cc\u060c \u062a\u062c\u0631\u0628\u0647 \u0645\u0631\u0648\u0631 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f.<\/p>\n<p><strong>\u062a\u0648\u0627\u0628\u0639 \u0648 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633:<\/strong><\/p>\n<p>\u0627\u06cc\u0646 <code>callbackFunc<\/code> \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062f\u06cc\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0622\u0633\u062a\u0627\u0646\u0647 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f.<br \/>\u0627\u06cc\u0646 <code>options<\/code> \u0634\u06cc \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0631\u0641\u062a\u0627\u0631 \u0646\u0627\u0638\u0631 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u062a\u0639\u06cc\u06cc\u0646 \u0631\u06cc\u0634\u0647 \u0648 \u0622\u0633\u062a\u0627\u0646\u0647.<\/p>\n<p><strong>\u0646\u062a\u06cc\u062c\u0647<\/strong><\/p>\n<p>\u0628\u0627 \u062a\u0633\u0644\u0637 \u0628\u0631 IntersectionObserver API\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u062c\u0631\u0628\u0647 \u0627\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f.  \u0686\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0641\u06cc\u062f \u062e\u0628\u0631\u06cc\u060c \u06cc\u06a9 \u0633\u0627\u06cc\u062a \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u060c \u06cc\u0627 \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0646\u06af\u06cc\u0646\u06cc \u062f\u0627\u0631\u062f\u060c \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 IntersectionObserver \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631\u06af\u06cc\u0631 \u0645\u06cc\u200c\u0645\u0627\u0646\u0646\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u06a9\u0627\u0631\u0622\u0645\u062f\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f\u060c \u0648\u0627\u0631\u062f \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u062e\u0648\u062f \u0634\u0648\u06cc\u062f \u0648 \u0627\u0632 \u0647\u0645\u06cc\u0646 \u0627\u0645\u0631\u0648\u0632 \u0634\u0631\u0648\u0639 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u06a9\u0646\u06cc\u062f.  \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0627\u0632 \u062a\u062c\u0631\u0628\u0647 \u0645\u0631\u0648\u0631 \u0631\u0648\u0627\u0646 \u0648 \u0645\u062f\u0627\u0648\u0645 \u0634\u0645\u0627 \u062a\u0634\u06a9\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u06a9\u0631\u062f!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0627\u06cc\u0646 Intersection Observer API \u0631\u0648\u0634\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 \u062a\u0642\u0627\u0637\u0639 (\u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647) \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0628\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u062c\u062f\u0627\u062f \u06cc\u0627 \u0646\u0645\u0627\u06cc \u0633\u0646\u062f \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a\u060c \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0628\u0647 \u0646\u0645\u0627\u06cc\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u0646\u0628\u0644 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":67766,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-67765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/67765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=67765"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/67765\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/67766"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=67765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=67765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=67765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}