Wie kann ich feststellen, ob mein Polymer-Element gerade sichtbar ist?

Question

In meiner Anwendung gibt es ein benutzerdefiniertes Messaging-Element.

Ich möchte eine bestimmte Benachrichtigung an einen Benutzer nur dann senden, wenn das Element im Moment nicht sichtbar ist (oder außerhalb des Ansichtsfensters).

Wie konnte das mit Polymer gemacht werden?

Answer 1

Sie könnten Element.getBoundingClientRect() verwenden, um zu testen, ob ein Element im Ansichtsfenster sichtbar ist (siehe How to tell if a DOM element is visible in the current viewport?):

Polymer({ 
    ... 
    _onSomeEvent: function() { 
    var targetEl = /* ... */; 
    if (!this._isElementInViewport(targetEl)) { 
     // send notification to user 
    } 
    }, 

    _isElementInViewport: function(el) { 
    const 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() */ 
    ); 
    } 
}); 

Basierend auf Ihrem other question, ich nehme an, Sie im Rahmen der <iron-list> sind gefragt. Wenn Sie beispielsweise die Ansichtsfenstersicht eines bestimmten Listenelements bestimmen möchten, können Sie testen, ob der Index des Elements zwischen <iron-list>.firstVisibleIndex und <iron-list>.lastVisibleIndex liegt.

Polymer({ 
    ... 
    _onSomeEvent: function() { 
    var targetEl = /* ... */; 
    if (!this._isElementInViewport(targetEl)) { 
     // send notification to user 
    } 
    }, 

    _isElementInViewport: function(el) { 
    var index = /* get index of el */; 
    return index >= this.$.myIronList.firstVisibleIndex && 
      index <= this.$.myIronList.lastVisibleIndex; 
    } 
});