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

时间:2017-02-21 21:37:44

标签: polymer polymer-1.0

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

我想向用户发送某个通知,以防该元素此刻不可见(或在视口之外)。

如何用Polymer完成?

1 个答案:

答案 0 :(得分:3)

您可以使用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;
  }
});