如何在 Polymer Element (Polymer 2.0) 中实现这段代码

Question

目前我正在尝试将此 JavaScript 代码放入我的 Polymer 元素中，但是，由于错误 "Uncaught TypeError: Cannot read property 'offsetHeight' of 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

Class-based elements should use the native DOM APIs instead of the Polymer.dom APIs. Legacy elements can optionally use the native APIs.

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

如何在 Polymer Element (Polymer 2.0) 中实现这段代码

How can implement this code in a Polymer Element (Polymer 2.0)

javascript

animation

polymer

polymer-2.x