当元素移出窗口左侧时的条件

Question

I am trying to detect when an element, that a jQuery plugin makes draggable, moves off the left edge of the window.

I have a if condition in the on drag custom-event. The event fires on drag, but the alert inside the condition doesn't fire when the element moves off the left edge of the screen.

This leads me to think there is something wrong with my if-condition.

To me, this reads going left and when anything greater than 0% is off the left edge of the screen.

$('#tabViewWindow').pep({
    axis:'x',
    useCSSTranslation:false,
    drag:function(ev, obj){
    if(obj.dx>0 && obj.$el.offset().left>$(window).width()*0){
        obj.velocityQueue = new Array(5);
        alert("left and moving towards off screen");
        return false;
    }
    handleOpacity(ev, obj)
    },
 });
 function handleOpacity(ev, obj){
    var opacity = 1 - (parseInt(obj.$el.css('left'))/$(window).width());
    obj.$el.css('opacity', opacity);
 }

Answer 1

I'd recommend taking the elements' bounding box as it has been computed for the page the element is on by the browser, using element.getBoundingClientRect().left (this might be identical to jQuery's offset.left) and simply checking if it's less than 0. If so, your element is at least partially off screen. Then, as second check, if element.getBoundingClientRect().left + element.getBoundingClientRect().width is smaller than 0, your element is entirely off-screen.