lgwebdream / FE-Interview

🔥🔥🔥 前端面试,独有前端面试题详解,前端面试刷题必备,1000+前端面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器
https://lgwebdream.github.io/FE-Interview/
Other
6.82k stars 896 forks source link

Day182:怎么计算组件在视口内出现了几次?IntersectionObserver 怎么使用的?怎么知道一个 DOM 节点出现在视口内? #999

Open Genzhen opened 3 years ago

Genzhen commented 3 years ago

每日一题会在下午四点在交流群集中讨论,五点小程序中更新答案 欢迎大家在下方发表自己的优质见解 二维码加载失败可点击 小程序二维码

扫描下方二维码,收藏关注,及时获取答案以及详细解析,同时可解锁800+道前端面试题。

qzruncode commented 3 years ago
new IntersectionObserver((entries, observer) => {
  const ratio = entries[0].intersectionRatio; // 元素出现在parent视口中的比例
}, {
  root: parent,
  rootMargin: "0px",
  threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
}).observe(target)
836334258 commented 1 year ago

通过entrie.isIntersecting判断