html 判断控件是否在显示图片,判断元素是否出现在可视区域

有些时候我们需要一些效果展示，并在指定的元素从页面底部出现在可视区域时加载。

效果

代码

CSS

.box {width: 100%;height: 200px;background: #ccc;margin-bottom: 10px;text-align: center;color: #fff;line-height: 200px;font-family: microsoft yahei;font-size: 40px; }

.animate { animation: showText 1s;}

@keyframes showText {from {font-size: 20px;}to {font-size: 40px;}}

HTML

JS

var box = document.getElementsByClassName('box');

document.addEventListener('scroll', function () {

var visibleBottom = window.scrollY + document.documentElement.clientHeight;

var visibleTop = window.scrollY;

console.log(document.documentElement.clientHeight);

for (var i = 0; i < box.length; i++) {

var centerY = box[i].offsetTop + (box[i].offsetHeight / 2);

if (centerY > visibleTop && centerY <