-1

我正在尝试使用getBoundingClientRect以下内容：如何判断 DOM 元素是否在当前视口中可见？

但我不能让它工作，我显然做错了什么。请告诉我什么。

HTML：

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="one">
Div "One"
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JS：

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

function onVisibilityChange(el, callback) {
    var old_visible;
    return function () {
        var visible = isElementInViewport(el);
        if (visible != old_visible) {
            old_visible = visible;
            if (typeof callback == 'function') {
                callback();
            }
        }
    }
}

var handler = onVisibilityChange(el, function() {
document.getElementById("one").className="theone";
});

if (window.addEventListener) {
    addEventListener('DOMContentLoaded', handler, false); 
    addEventListener('load', handler, false); 
    addEventListener('scroll', handler, false); 
    addEventListener('resize', handler, false); 
} else if (window.attachEvent)  {
    attachEvent('onDOMContentLoaded', handler); // IE9+ :(
    attachEvent('onload', handler);
    attachEvent('onscroll', handler);
    attachEvent('onresize', handler);
}
4

1 回答 1

0

从您的描述来看，您似乎只是缺少要查看的元素的声明。

尝试在顶部添加：

var el = document.getElementById("one");

编辑： 上面代码的问题在于 onVisibilityChange 函数。变量 old_visible 未定义，因此 if 语句：

if (visible != old_visible) {

第一次运行总是正确的。要解决此问题，只需将 old_visible 声明为 isElementInViewport(el)：

var old_visible = isElementInViewport(el);

这样，您的处理程序将在可见性更改时执行。

PS：我不知道您的目的是什么，但是如果您只想在元素在屏幕上可见时执行代码，则必须更改 onVisibilityChange 函数。

于 2016-10-24T15:24:53.560 回答