Polymer 如何知道我的聚合物元素当前是否可见

在我的应用程序中，有一个消息传递自定义元素

我只想在元素当前不可见（或不在视口中）的情况下向用户发送特定的通知

如何使用Polymer实现这一点？

您可以使用它来测试元素在视口中是否可见（请参阅）：

聚合物({ ... _onSomeEvent:function（）{ var targetEl=/*…*/； 如果（！this._isElementInViewport（targetEl））{ //向用户发送通知 } }, _IsElementViewPort:函数（el）{ const rect=el.getBoundingClientRect（）； 返回( rect.top>=0&& rect.left>=0&& 直底

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() */
    );
  }
});

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