Question

目前我正在尝试将此JavaScript代码放在我的Polymer元素中，但是，由于错误“Uncaught TypeError：无法读取属性'offsetHeight'为null”，它总是会失败。

JavaScript代码：

addEventListener('WebComponentsReady', function() {

var appHeader = document.querySelector('app-header');
var bgHeader = document.querySelector('.bg-header');
var appHeaderHeight = appHeader.offsetHeight;
var bgHeaderHeight = bgHeader.offsetHeight;

var transformBgHeader = function() {
var y = window.scrollY;
if (y <= bgHeaderHeight) {
  y = 1.5 * y;
}
var s = bgHeader.style;
s.transform = s.webkitTransform = 'translate3d(0,' + -y + 'px,0)';
appHeader.shadow = y > bgHeaderHeight - appHeaderHeight;
}

transformBgHeader();

addEventListener('scroll', transformBgHeader);

});

P.S：抱歉我的英文不好

Answer 1

尝试为匹配选择器，app-header和.bg-header的元素提供id。假设#appHeader和#bgHeader。并且，像这样访问属性offsetHeight。

this.$.appHeader.offsetHeight
this.$.bgHeader.offsetHeight

基于类的元素应该使用本机DOM API而不是 Polymer.dom API。旧版元素可以选择使用本机API。

参考。 https://www.polymer-project.org/2.0/docs/upgrade#polymer-dom-apis

如何在Polymer Element（Polymer 2.0）中实现此代码

1 个答案: