javascript - 检测 div 移动并以特定间隔运行函数 jQuery

Question

在我的网站上，我有一个 div (.wrapper)，它在鼠标滚轮滚动时绝对移动坐标，或者用户使用他的箭头键/空格键等。

在某些点上，比如说当 div.wrapper 还剩 -1000 像素时，我希望一个函数发生。

无论如何我可以在不使用间隔的情况下检查这个吗？

setInterval(function(){
    if($('.wrapper').css('left') <= 100 + 'px'){
        alert('foo');   
    } else {
        alert ('bar');  
    };
}, 5000);

Answer 1

没有事件可以检测 CSS 属性的变化。执行此操作的常用方法是在更新left属性后显式调用处理程序。

您可以将更改值的代码移动到单独的函数中：

function setLeft(left){
    $('.wrapper').css('left', left);
    if($('.wrapper').css('left') <= 100 + 'px'){
        alert('foo');   
    } else {
        alert ('bar');  
    };
}

如果您愿意，您可以在setLeft函数内部触发并将检查代码放入事件处理程序中。

另一件事是为.css触发事件创建一个包装函数：

var originalCssFunction = $.prototype.css;
$.prototype.css = function(){
    originalCssFunction.apply(this, arguments);
    // Check conditions and trigger event
}