在Polymer0.5中,我有以下代码:
模板:
<div class="scroll">
<div class="content">
<content></content>
</div>
</div>
脚本:
domReady: function() {
var width = $(this.shadowRoot).find('.content')[0].scrollWidth;
}
这段代码有效,我收到了一个非零的宽度值。
<小时/>现在我正在尝试迁移到Polymer1.0,我向div添加了一个ID:
<div class="scroll">
<div id="content" class="content">
<content></content>
</div>
</div>
现在的脚本是:
ready: function() {
var width = this.$.content.scrollWidth;
}
但是,这个宽度是0
。
旧的 domReady
函数和新的 ready
函数之间有区别吗?我也尝试过使用 attached
函数,但它也不起作用。
当我稍后尝试访问宽度
(通过按下按钮触发)时,我会得到我正在寻找的非零值。
该元素的使用方式如下:
<my-scrollbar>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus leo, sagittis lobortis velit vel, viverra vulputate purus. Proin lacinia magna eu erat iaculis, eget mollis lectus mattis.
</my-scrollbar>
因此,内部文本决定了元素的尺寸。
最佳答案
事实证明,我的原始代码可以在 Safari 中运行,但不能在 Chrome 中运行。
与 Zikes建议,我添加了一些异步,现在它可以在两种浏览器中运行。
最终答案:
attached: function() {
this.async(function(){
var width = this.$.content.scrollWidth;
},1)
}
关于polymer - domReady 与 Ready - 迁移到 Polymer 1.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30607541/