Javascript Vue：当元素不在视图中时发出应用类

我希望仅当DOM元素在我的视口中（屏幕上显示的任何部分）时，才将类应用于该元素，但是我的控制台日志显示它始终不在视图中，因此不会应用css类。为此，我使用vue指令和滚动事件侦听器，以下是我的指令：

Vue.directive('focus-toggle-class', {
    isLiteral: true,
    inserted: (el, binding, vnode) => {

        let scrolled = false;
        let rect = {};

        let checkInView = function(){
            if (inView) {
                el.classList.add(binding.value);
                console.log('in view');
            }
            else{
                el.classList.remove(binding.value);
                console.log('not in view');
            } 
        };

        window.addEventListener('load', function() {
            rect = el.getBoundingClientRect();
            console.log(rect);
            checkInView();
            window.addEventListener('scroll', function() {
                scrolled = true;
            });
        });

        let inView = (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
        )

        let timeout = setInterval(function() {
            if (scrolled) {
                scrolled = false;
                checkInView();
            }
        }, 2000);

    }
});

Vue.directive（'focus-toggle-class'{
岛上：是的，
插入：（el，绑定，vnode）=>{
让滚动=假；
设rect={}；
让checkInView=函数（）{
如果（查看）{
el.classList.add（binding.value）；
console.log（'in view'）；
}
否则{
el.classList.remove（binding.value）；
console.log（“不在视图中”）；
} 
};
addEventListener（'load'，function（））{
rect=el.getBoundingClientRect（）；
console.log（rect）；
checkInView（）；
addEventListener（'scroll'，function（）{
滚动=真；
});
});
让我们看一下=(
rect.top>=0&&
rect.left>=0&&
右