结构如下：
<div id="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
判断方法：
function position(element) {
elementOffsetTop = element.offsetTop - container.offsetTop;
// 在上方
isTop = container.scrollTop > divOffsetTop + element.clientHeight;
// 在下方
isBottom = container.scrollTop < divOffsetTop - container.clientHeight;
if (isTop || isBottom) {
console.log("消失");
} else {
console.log("出现");
}
}
完整代码参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#container {
height: 500px;
width: 300px;
overflow-y: scroll;
background-color: aqua;
}
.div1,
.div2,
.div3,
.div4 {
height: 400px;
width: 280px;
/* border: 1px solid springgreen; */
margin-top: 20px;
}
.div1 {
background-color: violet;
}
.div2 {
background-color: #fff;
}
.div3 {
background-color: tomato;
}
</style>
</head>
<body>
<button>定位</button>
<div id="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
<script>
const container = document.querySelector("#container");
const div1 = document.querySelector(".div1");
const div2 = document.querySelector(".div2");
const div3 = document.querySelector(".div3");
const div4 = document.querySelector(".div4");
const button = document.querySelector("button");
button.addEventListener("click", () => {
// 如果div1在可视范围内，按钮没反应，否则有反应
console.log(document.querySelectorAll("#container>div")[1])
position(div3)
});
function position(element) {
// 获取container的可视范围
console.log('container.clientHeight',container.clientHeight);
// 获取元素的高度
console.log('element.clientHeight',element.clientHeight);
// 获取元素的偏移距离
divOffsetTop = element.offsetTop - container.offsetTop;
console.log('divOffsetTop',divOffsetTop);
// 页面滚动的距离
console.log(container.scrollTop);
// 在上方
let isTop = container.scrollTop > divOffsetTop + element.clientHeight;
// 在下方
let isBottom = container.scrollTop < divOffsetTop - container.clientHeight;
if (isTop || isBottom) {
container.scrollTop = divOffsetTop
console.log("消失");
} else {
console.log("出现");
}
}
</script>
</html>
