Question

我试图在getBoundingClientRect之后使用 <div id="one"> Div "One" </div> ：How to tell if a DOM element is visible in the current viewport?

但我无法让它发挥作用，而我显然做错了什么。请告诉我什么。

HTML：

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);
}

JS：

git status

Answer 1

根据你的描述，你似乎只是缺少你想要观看的元素的声明。

尝试在顶部添加：

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

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

if (visible != old_visible) {

在第一次运行时始终为真。要解决此问题，只需将old_visible声明为isElementInViewport（el）：

var old_visible = isElementInViewport(el);

这样，当可见性发生变化时，您的处理程序将被执行。

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

getBoundingClientRect - 新手问题

1 个答案: