Intersection Observer 观察元素何时进入或退出浏览器的视口
浏览器 元素 进入 退出 观察 何时 observer intersection
2023-09-14 08:58:45 时间
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>Intersection Observer API</title>
<link rel="shortcut icon" type="image/ico" href="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--移动端视图-->
<meta name="renderer" content="webkit" />
<meta name="keywords" content="ajanuw" />
<!--关键词-->
<meta name="description" content="ajanuw, b,c" />
<!--网站内容描述-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Pragma" content="no-cache" />
<!--禁止浏览器从本地计算机的缓存中访问页面内容-->
<meta http-equiv="Window-target" content="_top" />
<!--强制页面在当前窗口以独立页面显示-->
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
<!--显示字符集的设定-->
<meta http-equiv="Content-Language" content="zh-cn" />
<!--显示语言的设定-->
<meta http-equiv="imagetoolbar" content="false" />
<!--指定是否显示图片工具栏,false不显示,true显示-->
<link rel="icon" sizes="192x192" href="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />
<link rel="apple-touch-icon" href="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />
<meta name="msapplication-square310x310logo" content="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />
<meta name="theme-color" content="#ff4081" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- Chrome, Firefox OS and Opera -->
<link rel="apple-touch-startup-image" href="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />
<style>
body {
height: 1000px;
}
.full-img {
max-width: 100%;
}
.doc {
position: fixed;
right: 0;
top: 0;
color: #fff;
}
</style>
</head>
<body>
<!--[if lt IE 8]> <h3>请升级你的浏览器,或更换主浏览器!!!</h3> <![endif]-->
<img class="full-img" src="http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-orij0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:HcaTgLGmJ6IbOt_d9ZGOQIqtv6g="
alt="">
<div class="doc"></div>
<script>
let img = document.querySelector('.full-img');
let doc = document.querySelector('.doc');
var options = {
root: null,
rootMargin: '0px',
threshold: [0, 0.5, 1] // 阈值
}
var callback = function (entries, observer) {
entries.forEach(entry => {
// 总面积
var h = entry.boundingClientRect.height;
// 可视 面积
var bandH = entry.intersectionRect.height;
if (bandH == h) {
console.log('100%');
}
if (bandH < h * 0.5 && bandH != 0) {
console.log('小于 50%');
}
if (bandH > h * 0.5 && bandH < h) {
console.log('大于 50%');
}
if (bandH <= 0) {
console.log('0%');
}
if (entry.isIntersecting) {
Object.assign(doc, {
...Object.assign(doc.style, {
background: 'green'
}),
textContent: 'image show '
});
} else {
Object.assign(doc, {
...Object.assign(doc.style, {
background: 'red'
}),
textContent: 'image hidden '
});
}
});
};
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(callback, options);
observer.observe(img);
}
</script>
</body>
</html>
See also:
相关文章
- JavaScript停止冒泡和阻止浏览器默认行为
- 用数据说话!IE10 和 Chrome 等四大浏览器横评
- Win10 启动64位IE浏览器——修改注册表方法
- 浏览器类型前缀
- Python+selenium驱动谷歌浏览器
- 在elementary os上安装brave 浏览器
- 另一种使用SAP SAT事务码对通过浏览器启动的应用的性能测量和分析方式
- Chrome 浏览器扩展 - Night Eye
- paip.最省内存的浏览器评测 cah
- 成功解决~请使用IE浏览器(兼容模式)
- CodeIgniter实现config控制的多语言,可根据浏览器语言自动转换
- 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
- (效果五)js获取客户端ip地址及浏览器信息
- WebGL 支持测试,并已支持的浏览器版本摘要
- ubuntu16.04火狐浏览器右键下载视频方法
- chrome浏览器下的xdebug helper使用方法
- JS 客户端浏览器操作、BOM、渗透客户端浏览器(windows对象:screen屏幕操作、location浏览器域名、history浏览器历史、Navigator浏览器信息、cookie)
- 对浏览器内核的理解
- 谷歌浏览器的源码分析(33)