判断元素进入可视区的方法

原创

已于 2022-08-17 09:40:16 修改 · 1.4k 阅读

标签

#css #html #javascript

收录于

于 2022-08-15 15:52:42 首次发布

本文介绍了两种检测元素进入可视区的方法。一是利用getBoundingClientRect API，通过比较元素相对于视口的位置来判断。二是使用Vue项目的useIntersectionObserver，结合@vueuse/core库实现数据懒加载，当元素进入可视区时触发业务逻辑。

一、getBoundingClientRect

getBoundingClientRect 得到的 top bottom left right 均是以视窗左上角(0,0)坐标为参照点

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        span {
            display: block;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 20px;
            box-sizing: border-box;
        }

        #target {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div>
        <h3>getBoundingCli