方法：确实元素顶部到浏览器窗口顶部的距离究竟多于一般来说区域高度，如果高于就看出。这里可以用一个方法： getBoundingClientRect()，该方法留在一个对象，该对象存储了元素四个边界到浏览器窗口上边和左边的距离。
getBoundingClientRect方法：
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>也就是说区域启动时</title> <style> #showp { width: 500px; height: 350px; background-color: aqua; margin: 1000px auto 0 auto; } .showp { animation: loading 2s linear; } @keyframes loading { from { opacity: 0; transform: translate(-100%, 0); } to { opacity: 1; transform: translate(0, 0); } } </style></head><body> <p id="showp"></p> <script type="text/javascript"> window.onscroll = function() { var show = document.getElementById("showp"); // 给与浏览器窗口可视化高度 var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 换取showp元素顶部到浏览器窗口顶部的距离 var showTop = show.getBoundingClientRect().top; // 如果距离极小可视化窗口高度，就给showp元素加进动画效果 if (showTop <= clientH) { show.classList.add("showp"); } }; </script></body></html>
直通结果：不告诉他为什么。。。结果的动图附上不上来。。。。口述一下好了：就是动画开始不启动时，滚动条摇动到可以表明元素的时候才不会开始查找动画。可以利用这个原理来发挥作用图片的启动时，就是图片到可用区域的时候给它乐府src的值。
关的延揽：
JS图片先于载入实例
发送给大图该网站大图隐蔽
以上就是js区域读取：getBoundingClientRect方法的参考内容，更多恳请注意php中文网其它系统性文章！