逍遥阁

判断元素可见性

关键词: html

判断元素可见性

```
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Index</title>
</head>
<body>
<style>
    body {
        margin: 0;
    }

#box1, #box2 {
        width: 200px;
        height: 200px;
        line-height: 200px;
        background-color: red;
        color: white;
        text-align: center;
    }
</style>
<div style="height:1000px;"></div>
<div id="box1">test1</div>
<div style="height:10px;"></div>
<div id="box2">test2</div>
<div style="height:1000px;"></div>
<script>
    function showHideCallback(config) {
        function cb(entries) {
            for (const i in entries) {
                const item = entries[i];
                const target = item.target;
                const id = target.id;
                const status = target.status;
                const configSelf = map[id];
                if (item.intersectionRatio >= configSelf.rate) {
                    target.status = "show";
                    if (status !== "show") {
                        configSelf.show();
                    }
                } else {
                    target.status = "hide";
                    if (status !== "hide") {
                        configSelf.hide();
                    }
                }
            }
        }

showHideCallback(config);
</script>
</body>
</html>
```

admin
2021-12-27 23:11:00
html

文章分类

文章标签

文章归档

友情链接

判断元素可见性