问题形容
网上的帖子大多数是：判断一个元素是否在可视区域中
而帖子中举的例子，也是以浏览器最外层body/html的滚动条为例子，进行解说，基本上都是如下的效果图：
留神这里的滚动条是最外层的
- 实际上，咱们页面的滚动条，有时，并不是以最外层的
body或者html进行滚动的 - 可能是页面两头的某一个
dom元素能够滚动 - 咱们须要判断这个
dom滚动元素内的某一个小dom指标元素何时呈现，何时达到可视区域 - 这里的可视区域是能看到，和最外层的那个滚动条没有关系的
- 如下效果图
如需要：当红色盒子在内层滚动条滚动中呈现时，就更改对应dom元素背景色为粉红色
留神这里有两个滚动条，咱们的需要是
外面的滚动条滚动时，去做对应管制
公式提出
- 其实也很简略，首先咱们剖析一些元素层级构造。
- 最外层的必定是
body和html，这个不必管它 - 在
body标签外部，有一个<div class="scrollBox"></div>，这个dom元素领有滚动条 - 而在
.scrollBox的dom元素内，还有一个指标元素<div class="target"></div>，看看这个指标元素.target何时呈现，何时达到可视区域
公式：
滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度
滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度
滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度
或：
边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度
边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度
边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度
即，当滚动的间隔超过这个边界值时，指标元素就会呈现
这里的边界值，肯定是初始边界值，就是要提前算好，最好存一份，因为滚动的话，会更改相应间隔地位的
复制粘贴代码看成果更好了解：
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
.scrollBox {
width: 100%;
height: 300px;
background-color: #ccc;
/* 领有滚动条 */
overflow-y: auto;
}
.target {
width: 60px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<div class="scrollBox">
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<div class="target"></div>
</div>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<script>
let scrollBoxDom = document.querySelector('.scrollBox')
let targetDom = document.querySelector('.target')
// 留神！这里的边界值，是原始的地位的值，因为滚动的话，会更改元素的getBoundingClientRect的相干值
let boundaryValue = targetDom.getBoundingClientRect().top - scrollBoxDom.getBoundingClientRect().top - scrollBoxDom.offsetHeight
// 边界值 = 指标元素间隔顶部高度 - 滚动盒子容器间隔顶部高度 - 滚动盒子容器本身的高度
function callBack() {
if (scrollBoxDom.scrollTop > boundaryValue) {
console.log('在可视区域');
scrollBoxDom.style.backgroundColor = 'pink'
} else {
console.log('不在可视区域');
scrollBoxDom.style.backgroundColor = '#ccc'
}
}
scrollBoxDom.addEventListener('scroll', callBack)
</script>
</body>
</html>附-以浏览器最外层body/html的滚动条为例子代码
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
.target {
width: 60px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<h1>孙悟空</h1>
<div class="target"></div>
<script>
window.onload = () => {
let targetDom = document.querySelector('.target') // 指标元素dom
function callBack() {
const top = targetDom.getBoundingClientRect().top; // 指标元素dom间隔顶部的高度
if (top <= window.innerHeight) { // 当top小于等于文档显示区域的高时，就进入可视区域了
console.log('在可视区域');
document.body.style.background = 'pink'
} else {
console.log('不在可视区域'); // 当top大于文档显示区域的高时，就来到可视区域了
document.body.style.background = '#ccc'
}
}
window.addEventListener('scroll', callBack);
}
</script>
</body>
</html>
发表回复