Как узнать, отображается ли в данный момент мой элемент Polymer

Question

В моем приложении есть пользовательский элемент обмена сообщениями.

Я хочу отправить определенное уведомление пользователю только в том случае, если элемент не отображается на данный момент (или из области просмотра).

Как это можно сделать с помощью полимера?

Answer 1

Вы можете использовать Element.getBoundingClientRect(), чтобы проверить, является ли элемент видимым в окне (см 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() */ 
    ); 
    } 
}); 

Основываясь на вашем other question, я предполагаю, что вы спрашиваете в контексте <iron-list>. Если, например, вы хотите определить видимость видового экрана для определенного элемента списка, вы можете проверить, находится ли индекс элемента между <iron-list>.firstVisibleIndex и <iron-list>.lastVisibleIndex.

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