V\u00ed d\u1ee5:<\/span><\/p>\n Trong tr\u01b0\u1eddng h\u1ee3p ph\u1ea7n t\u1eed ul \u0111\u01b0\u1ee3c fix c\u1ee9ng chi\u1ec1u cao. Ch\u00fang ta c\u1ea7n l\u1ea5y c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a ph\u1ea7n t\u1eeb n\u00e0y.<\/span><\/p>\n T\u1eeb v\u00ed d\u1ee5 tr\u00ean c\u00f3 th\u1ec3 th\u1ea5y vi\u1ec7c t\u00ednh to\u00e1n khi n\u00e0o th\u00ec ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n t\u1edbi cu\u1ed1i trang s\u1ebd ph\u1ea3i ph\u00e2n theo t\u1eebng tr\u01b0\u1eddng h\u1ee3p.\u00a0<\/span><\/p>\n M\u1ed7i tr\u01b0\u1eddng h\u1ee3p l\u1ea1i c\u00f3 c\u00e1c ph\u00e9p t\u00ednh to\u00e1n ri\u00eang, ch\u01b0a k\u1ec3 c\u00e1c thu\u1ed9c t\u00ednh v\u1ec1 v\u1ecb tr\u00ed v\u00e0 chi\u1ec1u cao \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u1edf v\u00ed d\u1ee5 tr\u00ean kh\u00f4ng ph\u1ea3i ai c\u0169ng bi\u1ebft l\u00e0 c\u00f3 th\u1ec3 ph\u00e2n bi\u1ec7t r\u00f5 r\u00e0ng. T\u1eeb \u0111\u00f3 d\u1ec5 g\u00e2y nh\u1ea7m l\u1eabn trong l\u00fac x\u00e2y d\u1ef1ng h\u00e0m t\u00ednh to\u00e1n.\u00a0<\/span><\/p>\n Th\u00eam v\u00e0o \u0111\u00f3 n\u1ebfu \u00e1p d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p n\u00e0y v\u00e0o react th\u00ec d\u1ec5 ph\u00e1t sinh c\u00e1c l\u1ed7i logic kh\u00f4ng mong mu\u1ed1n m\u00e0 m\u1ed9t ng\u01b0\u1eddi m\u1edbi h\u1ecdc react s\u1ebd kh\u00f4ng \u0111\u1ec3 \u00fd v\u00e0 kh\u00f3 debug \u0111\u01b0\u1ee3c. V\u00ed d\u1ee5 nh\u01b0 khi fetch th\u00eam d\u1eef li\u1ec7u th\u00ec app s\u1ebd \u0111\u01b0\u1ee3c render l\u1ea1i, t\u1eeb \u0111\u00f3 h\u00e0m t\u00ednh to\u00e1n c\u0169ng \u0111\u01b0\u1ee3c t\u1ea1o l\u1ea1i, d\u1eabn t\u1edbi app b\u1ecb add th\u00eam m\u1ed9t s\u1ef1 ki\u1ec7n window.addEventListener n\u00ean bu\u1ed9c ph\u1ea3i th\u00eam \u0111i\u1ec1u ki\u1ec7n.<\/span><\/p>\n Ch\u1ec9 m\u1ed9t vi\u1ec7c fetch th\u00eam d\u1eef li\u1ec7u \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u01b0\u1edfng ch\u1eebng nh\u01b0 \u0111\u01a1n gi\u1ea3n, nh\u01b0ng n\u1ebfu \u00e1p d\u1ee5ng c\u00e1ch tr\u00ean th\u00ec logic l\u1ea1i kh\u00e1 ph\u1ee9c t\u1ea1p v\u00e0 ph\u00e1t sinh nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p m\u00e0 khi vi\u1ebft c\u00e1c h\u00e0m x\u1eed l\u00fd logic ph\u1ea3i c\u1ef1c k\u1ef3 \u0111\u1ec3 \u00fd.<\/span><\/p>\n \u00dd t\u01b0\u1edfng<\/b>: Ch\u00fang ta \u0111\u1eb7t m\u1ed9t th\u1ee9 g\u00ec \u0111\u00f3 \u0111\u1ec3 n\u00f3 quan s\u00e1t app c\u1ee7a ch\u00fang ta, khi n\u00e0o th\u00f4ng tin cu\u1ed1i c\u00f9ng c\u1ee7a trang \u0111\u01b0\u1ee3c hi\u1ec7n l\u00ean th\u00ec th\u1ef1c hi\u1ec7n l\u1ea5y th\u00eam d\u1eef li\u1ec7u, sau \u0111\u00f3 th\u00eam v\u00e0o danh s\u00e1ch c\u1ea7n hi\u1ec3n th\u1ecb. V\u1edbi c\u00e1c y\u00eau c\u1ea7u nh\u01b0 tr\u00ean ch\u00fang ta c\u00f3 th\u1ec3 d\u00f9ng Intersection Observer thay cho vi\u1ec7c t\u00ednh to\u00e1n v\u1ecb tr\u00ed.\u00a0<\/span><\/p>\n “The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.”<\/span><\/p>\n Intersection Observer API cung c\u1ea5p m\u1ed9t c\u00e1ch \u0111\u1ec3 quan s\u00e1t kh\u00f4ng \u0111\u1ed3ng b\u1ed9 c\u00e1c thay \u0111\u1ed5i trong giao di\u1ec7n v\u1edbi m\u1ed9t ancestor element hay v\u1edbi m\u1ed9t document viewport c\u1ea5p cao – Theo MDN.<\/a><\/span><\/p>\n (viewport: l\u00e0 m\u1ed9t khung h\u00ecnh, c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t khu v\u1ef1c h\u00ecnh \u0111a gi\u00e1c (th\u01b0\u1eddng l\u00e0 h\u00ecnh ch\u1eef nh\u1eadt) tr\u00ean m\u00e0n h\u00ecnh m\u00e0 b\u1ea1n \u0111\u01b0\u1ee3c nh\u00ecn th\u1ea5y.\u00a0<\/span><\/p>\n Trong tr\u00ecnh duy\u1ec7t web, n\u00f3 \u0111\u1ec1 c\u1eadp \u0111\u1ebfn ph\u1ea7n document m\u00e0 ng\u01b0\u1eddi d\u00f9ng \u0111ang nh\u00ecn th\u1ea5y, c\u00e1i hi\u1ec3n th\u1ecb trong c\u1eeda s\u1ed5 \u1ee9ng d\u1ee5ng (ho\u1eb7c tr\u00ean m\u00e0n h\u00ecnh n\u1ebfu hi\u1ec3n th\u1ecb \u1edf d\u1ea1ng full screen).\u00a0<\/span><\/p>\n C\u00e1c ph\u1ea7n b\u00ean ngo\u00e0i viewport l\u00e0 nh\u1eefng th\u1ee9 b\u1ea1n kh\u00f4ng nh\u00ecn th\u1ea5y, cho \u0111\u1ebfn khi b\u1ea1n scroll t\u1edbi n\u00f3.<\/span><\/p>\n B\u01b0\u1edbc 1:<\/span> Kh\u1edfi t\u1ea1o d\u1ef1 \u00e1n<\/em><\/p>\n \u0110\u1ea7u ti\u00ean l\u00e0 t\u1ea1o m\u1ed9t project react th\u00f4ng qua c\u00e2u l\u1ec7nh quen thu\u1ed9c<\/span><\/p>\n \u0111\u1ee3i cho project \u0111\u01b0\u1ee3c t\u1ea1o ra sau \u0111\u00f3 ch\u1ea1y l\u1ec7nh\u00a0<\/span><\/p>\n \u0110\u01b0\u1ee3c m\u1ed9t m\u00e0n h\u00ecnh c\u00f3 giao di\u1ec7n nh\u01b0 b\u00ean tr\u00ean<\/span><\/p>\n B\u01b0\u1edbc 2:<\/span> Vi\u1ebft code render ra m\u1ed9t danh s\u00e1ch ti\u00eau \u0111\u1ec1 c\u00e1c quy\u1ec3n s\u00e1ch c\u00f3 trong th\u01b0 vi\u1ec7n<\/span><\/em><\/p>\n L\u1ea5y d\u1eef li\u1ec7u\u00a0<\/span><\/p>\n B\u1eaft \u0111\u1ea7u ch\u1ec9nh s\u1eeda file App.js<\/span><\/p>\n \u0110\u1ea7u ti\u00ean c\u1ea7n c\u00f3 d\u1eef li\u1ec7u tr\u01b0\u1edbc \u0111\u00e3, ch\u00fang ta h\u00e3y d\u00f9ng axios \u0111\u1ec3 th\u1eed l\u1ea5y d\u1eef li\u1ec7u n\u00e0o<\/span><\/p>\n Ch\u1ea1y th\u1eed code v\u00e0 n\u1ebfu m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb nh\u01b0 b\u00ean d\u01b0\u1edbi l\u00e0 \u0111\u00e3 l\u1ea5y \u0111\u01b0\u1ee3c data<\/span><\/p>\n Hi\u1ec3n th\u1ecb data l\u00ean m\u00e0n h\u00ecnh<\/span><\/p>\n D\u00f9ng state \u0111\u1ec3 l\u01b0u tr\u1eef danh s\u00e1ch c\u00e1c quy\u1ec3n s\u00e1ch \u0111\u00e3 l\u1ea5y \u0111\u01b0\u1ee3c<\/span><\/p>\n l\u01b0u danh s\u00e1ch c\u00e1c quy\u1ec3n s\u00e1ch \u0111\u00e3 l\u1ea5y \u0111\u01b0\u1ee3c v\u00e0o bi\u1ebfn books<\/span><\/p>\n D\u00f9ng h\u00e0m map cho danh s\u00e1ch c\u00e1c quy\u1ec3n s\u00e1ch \u0111\u1ec3 hi\u1ec3n th\u1ecb ti\u00eau \u0111\u1ec1 c\u1ee7a c\u00e1c quy\u1ec3n s\u00e1ch l\u00ean m\u00e0n h\u00ecnh th\u00f4i n\u00e0o<\/span><\/p>\n L\u01b0u \u00fd: th\u00eam key cho m\u1ed7i ph\u1ea7n t\u1eed <\/span><div key={book.key}>{book.title}<\/div>\u00a0<\/span><\/p>\n Ta c\u00f3 code nh\u01b0 h\u00ecnh d\u01b0\u1edbi<\/span><\/p>\n K\u1ebft qu\u1ea3 c\u1ee7a code n\u00e0y \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb l\u00ean tr\u00ecnh duy\u1ec7t nh\u01b0 h\u00ecnh d\u01b0\u1edbi<\/span><\/p>\n <\/p>\n B\u01b0\u1edbc 3:<\/span> \u0110\u1eb7t IntersectionObserver v\u00e0 g\u1eafn \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ea7n quan s\u00e1t v\u00e0o IntersectionObserver<\/em><\/span><\/p>\n C\u00e2u h\u1ecfi \u0111\u1eb7t ra ti\u1ebfp theo, l\u00e0m sao \u0111\u1ec3 khi cu\u1ed9n xu\u1ed1ng cu\u1ed1i trang th\u00ec fetch th\u00eam d\u1eef li\u1ec7u?<\/span><\/p>\n Ph\u01b0\u01a1ng th\u1ee9c \u1edf \u0111\u00e2y kh\u00e1 \u0111\u01a1n gi\u1ea3n, \u0111\u00f3 ch\u00ednh l\u00e0 \u0111\u1eb7t m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u1ec3 quan s\u00e1t ph\u1ea7n t\u1eed cu\u1ed1i c\u00f9ng trong list c\u1ee7a ch\u00fang ta. N\u1ebfu ph\u1ea7n t\u1eed \u0111\u00f3 xu\u1ea5t hi\u1ec7n tr\u00ean m\u00e0n h\u00ecnh th\u00ec c\u00f3 ngh\u0129a l\u00e0 ng\u01b0\u1eddi d\u00f9ng \u0111\u00e3 cu\u1ed9n t\u1edbi cu\u1ed1i trang.<\/span><\/p>\n \u0110\u1ed1i t\u01b0\u1ee3ng gi\u00fap ch\u00fang ta quan s\u00e1t \u0111\u00f3 ch\u00ednh l\u00e0 IntersectionObserver v\u00e0 \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ea7n quan s\u00e1t \u0111\u00f3 ch\u00ednh l\u00e0 th\u1ebb div cu\u1ed1i c\u00f9ng trong danh s\u00e1ch.<\/span><\/p>\n Ch\u00fang ta s\u1ebd l\u1ee3i d\u1ee5ng thu\u1ed9c t\u00ednh ref \u0111\u1ec3 truy\u1ec1n th\u1ebb div cu\u1ed1i c\u00f9ng trong danh s\u00e1ch v\u00e0o h\u00e0m lastBookElementRef \u0111\u1ec3 th\u00eam n\u00f3 v\u00e0o danh s\u00e1ch m\u00e0 IntersectionObserver c\u1ea7n quan s\u00e1t.\u00a0<\/span><\/p>\n IntersectionObserver c\u1ea7n \u0111\u01b0\u1ee3c khai b\u00e1o b\u00ean ngo\u00e0i h\u00e0m lastBookElementRef \u0111\u1ec3 tr\u00e1nh vi\u1ec7c ng\u01b0\u1eddi quan s\u00e1t c\u1ee7a ch\u00fang ta b\u1ecb kill khi h\u00e0m th\u1ef1c thi xong. V\u00e0 \u0111\u1ec3 t\u1eeb b\u00ean trong h\u00e0m lastBookElementRef g\u1ecdi \u0111\u01b0\u1ee3c \u0111\u1ebfn bi\u1ebfn observer n\u1eb1m b\u00ean ngo\u00e0i ch\u00fang ta c\u1ea7n s\u1eed d\u1ee5ng useRef.<\/span><\/p>\n D\u00f9ng new IntersectionObserver \u0111\u1ec3 c\u00e0i m\u1ed9t h\u00e0m v\u00e0o trong observer, h\u00e0m n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi m\u1ed7i khi observer th\u1ea5y tr\u1ea1ng th\u00e1i c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng quan s\u00e1t c\u00f3 s\u1ef1 thay \u0111\u1ed5i.<\/span><\/p>\n <\/p>\n Nh\u01b0 v\u1eady ch\u00fang ta \u0111\u00e3 b\u1eaft \u0111\u01b0\u1ee3c s\u1ef1 ki\u1ec7n khi n\u00e0o ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n t\u1edbi cu\u1ed1i trang<\/span><\/p>\n B\u01b0\u1edbc 4:<\/span> C\u1eadp nh\u1eadt danh s\u00e1ch khi cu\u1ed9n \u0111\u1ebfn cu\u1ed1i trang<\/em><\/span><\/p>\n Ti\u1ebfp theo, khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n t\u1edbi cu\u1ed1i trang th\u00ec ch\u00fang ta ph\u1ea3i t\u0103ng s\u1ed1 trang l\u00ean +1 \u0111\u1ec3 l\u1ea5y th\u00eam d\u1eef li\u1ec7u v\u1ec1 v\u00e0 c\u1eadp nh\u1eadt v\u00e0o danh s\u00e1ch books<\/span><\/p>\n <\/p>\n Ch\u00fang ta \u0111\u00e3 load \u0111\u01b0\u1ee3c th\u00eam d\u1eef li\u1ec7u khi ph\u1ea7n t\u1eeb n\u1eb1m cu\u1ed1i danh s\u00e1ch xu\u1ea5t hi\u1ec7n tr\u00ean m\u00e0n h\u00ecnh, tuy nhi\u00ean \u0111ang b\u1ecb m\u1ed9t l\u1ed7i kh\u00e1 nghi\u00eam tr\u1ecdng l\u00e0 app c\u1ee7a ch\u00fang ta li\u00ean t\u1ee5c fetch th\u00eam d\u1eef li\u1ec7u kh\u00f4ng ng\u1eebng.\u00a0<\/span><\/p>\n V\u1ea5n \u0111\u1ec1 n\u00e0y x\u1ea3y ra do App kh\u00f4ng bi\u1ebft khi n\u00e0o n\u00ean g\u1eafn b\u1ed9 theo d\u00f5i v\u00e0o ph\u1ea7n t\u1eed cu\u1ed1i c\u00f9ng. V\u00ec n\u1ebfu c\u1ee9 sau m\u1ed7i l\u1ea7n render \u0111\u1ec1u g\u1eafn b\u1ed9 theo d\u00f5i v\u00e0o th\u00ec s\u1ebd xu\u1ea5t hi\u1ec7n tr\u01b0\u1eddng h\u1ee3p ch\u01b0a k\u1ecbp l\u1ea5y th\u00eam d\u1eef li\u1ec7u th\u00ec \u0111\u00e3 render xong v\u00e0 g\u1eafn b\u1ed9 theo d\u00f5i v\u00e0o, v\u00e0 ph\u1ea7n t\u1eed \u0111\u00f3 l\u1ea1i ti\u1ebfp t\u1ee5c xu\u1ea5t hi\u1ec7n tr\u00ean m\u00e0n h\u00ecnh cho n\u00ean l\u1ea1i k\u00e9o th\u00eam d\u1eef li\u1ec7u v\u00e0 render ti\u1ebfp<\/span><\/p>\n \u0110\u1ec3 kh\u1eafc ph\u1ee5c \u0111i\u1ec1u n\u00e0y ta th\u00eam m\u1ed9t bi\u1ebfn loading \u0111\u1ec3 ki\u1ec3m tra khi n\u00e0o n\u00ean g\u1eafn b\u1ed9 theo d\u00f5i v\u00e0o ph\u1ea7n t\u1eed cu\u1ed1i c\u00f9ng.<\/span><\/p>\n C\u00e1m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 theo d\u00f5i b\u00e0i vi\u1ebft c\u1ee7a m\u00ecnh. N\u1ebfu c\u00e1c b\u1ea1n ch\u01b0a bi\u1ebft v\u1ec1 reactjs ho\u1eb7c c\u1ea7n t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 c\u00e1c v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n c\u1ee7a react th\u00ec c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam b\u00e0i vi\u1ebft <\/span>1 s\u1ed1 \u0111\u1eb7c \u0111i\u1ec3m c\u01a1 b\u1ea3n c\u1ee7a React<\/a>\u00a0n\u00e0y nh\u00e9!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Ch\u00e0o m\u1eebng c\u00e1c b\u1ea1n \u0111\u00e3 gh\u00e9 th\u0103m trang blog c\u1ee7a Market Enterprise ch\u00fang m\u00ecnh. H\u00f4m nay ch\u00fang ta h\u00e3y c\u00f9ng nhau t\u00ecm hi\u1ec3u v\u1ec1 Infinite Scroll v\u1edbi Intersection Observer nh\u00e9!<\/p>\n","protected":false},"author":40,"featured_media":2724,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[112],"class_list":["post-2547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-intersection-observer"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=2547"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2547\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/2724"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=2547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=2547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=2547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"vi\u0301](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/08\/19182239\/vi%CC%81-du%CC%A3-ve%CC%82%CC%80-Infinite-Scroll-1024x665.jpg\")
<\/p>\n\n
\n
\n
\n
Intersection Observer l\u00e0 g\u00ec?<\/h2>\n
![\"Viewport\"](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19184301\/Viewport-1024x611.png\")
<\/p>\nC\u00e1c t\u00ednh n\u0103ng c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng Intersection Observer<\/h2>\n
\n
C\u00e1c b\u01b0\u1edbc th\u1eed nghi\u1ec7m kh\u1edfi t\u1ea1o m\u1ed9t d\u1ef1 \u00e1n<\/h2>\n
npx create-react-app infinite-scrolling\r\n\r\nnpm i axios<\/pre>\n
npm start<\/pre>\n
![\"Learn](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19185432\/Learn-React-1024x745.png\")
<\/p>\n![\"File](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19185909\/File-App-1024x789.png\")
<\/p>\n![\"Vi\u0301](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19191959\/Vi%CC%81-du%CC%A3-Infinite-Scroll-vo%CC%9B%CC%81i-Intersection-Observer--1024x541.png\")
<\/p>\nimport { useEffect, useState } from 'react';\r\n\r\nconst [books, setBooks] = useState([]);<\/pre>\n\n
books.map((book, index) => {\r\n return <div key={book.key} >{book.title}<\/div>;\r\n })\r\n<\/pre>\n![\"File](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19191154\/File-Appjs-1013x1024.png\")
<\/p>\n![\"Absolution\"](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19191642\/Absolution.png\")
<\/p>\n![\"Vi\u0301](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19192342\/Vi%CC%81-du%CC%A3-Infinite-Scroll-vo%CC%9B%CC%81i-Intersection-Observer-1-698x1024.png\")
<\/p>\n![\"Vi\u0301](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19192623\/Vi%CC%81-du%CC%A3-Infinite-Scroll-vo%CC%9B%CC%81i-Intersection-Observer-1b-1024x541.png\")
<\/p>\n![\"Vi\u0301](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19193029\/Vi%CC%81-du%CC%A3-Infinite-Scroll-vo%CC%9B%CC%81i-Intersection-Observer-2-799x1024.png\")
<\/p>\n![\"Vi\u0301](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19193104\/Vi%CC%81-du%CC%A3-Infinite-Scroll-vo%CC%9B%CC%81i-Intersection-Observer-2b-1024x540.png\")
<\/p>\n![\"Vi\u0301](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2022\/09\/19193257\/Vi%CC%81-du%CC%A3-Infinite-Scroll-vo%CC%9B%CC%81i-Intersection-Observer-3-700x1024.png\")
<\/p>\n