vue怎么通过监听滚动条实现元素（图片、文字）进入可视范围内的入场动画
vue2.0
类似于各种产品官网，例如手机展示页，下滑到下一区域，图片会有动画效果，滚到上面下面的图片又会恢复到准备状态。
动画效果使用v-show+过渡动画，怎么判断页面浏览到这个图片元素，然后打开v-show的开关，非常感谢
https://blog.csdn.net/weixin_49524462/article/details/121211476
利用浏览器原生提供的构造函数 IntersectionObserver，希望能帮到你
/**
* 观察目标元素是否出现到了可视区域
* @param eles 原生 document 可以多个也可以一个
* @param callback 当该元素出现在可视区域后触发回调，回调参数就是那个出现在可视区域上的元素
* @param root 视口元素，该元素的边界盒将作为可视区域， 默认 为整个文档
*/
function ObserverEleview(eles, callback = (e) => 0, root = document) {
const list = [];
// 创建一个观察者
const obs = new IntersectionObserver(([content]) => {
// 当该元素出现后触发回调方法
if (content.intersectionRatio >= 1) callback(content.target, content)
}, { threshold: 1, root });
// 开始观察 元素
for (let ele of list.concat(eles)) obs.observe(ele);
}
// 使用方法
ObserverEleview([...document.querySelectorAll("img")], (ele, content) => {
console.log("该图片出现在视野内了")
})
有用望采纳
这个有个计算滚动条高度的属性，然后去监听，比较滚动区域的高度小于页面高度显示滚动条，如果是控制返回指定位置最好用锚点，比较简单
判断用户是否在看当前网页以及判断某个元素是否在网页可视区域
https://blog.csdn.net/maoguiyou/article/details/51134560
html 元素在可视区域,js(jquery)判断页面内的元素是否在浏览器的可视区域内
https://blog.csdn.net/weixin_42115513/article/details/117941862
<!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>
div {
height: 100px;
}
</style>
</head>
<body>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div id="root">
<img index="0" src="1.jpg" alt="">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<script>
var intersectionObserver = new IntersectionObserver(function (entries) {
// If intersectionRatio is 0, the target is out of view
// and we do not need to do anything.
if (entries[0].intersectionRatio <= 0) return;
console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('img'));
</script>
</body>
</html>