在我的应用程序中,有一个消息传递自定义元素。
我想向用户发送某个通知,以防该元素此刻不可见(或在视口之外)。
如何用Polymer完成?
答案 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;
}
});