在Polymer0.5中,我有以下代码:
模板:
<div class="scroll">
<div class="content">
<content></content>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
脚本:
domReady: function() {
var width = $(this.shadowRoot).find('.content')[0].scrollWidth;
}
Run Code Online (Sandbox Code Playgroud)
此代码有效,我收到宽度的非零值.
现在我正在尝试迁移到Polymer1.0,我在div中添加了一个ID:
<div class="scroll">
<div id="content" class="content">
<content></content>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
现在脚本是:
ready: function() {
var width = this.$.content.scrollWidth;
}
Run Code Online (Sandbox Code Playgroud)
但是,这个宽度是0.
旧domReady功能和新ready功能之间有区别吗?我也尝试过使用该attached功能,但它也没有用.
当我尝试访问width后来(按下按钮触发),然后我得到我正在寻找的非零值.
该元素使用如下:
<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>
Run Code Online (Sandbox Code Playgroud)
因此内部文本决定了元素的尺寸.
事实证明我的原始代码在Safari中有效,但在Chrome中却没有.
有了Zikes的建议,我添加了一些异步,现在它适用于两种浏览器.
最终答案:
attached: function() {
this.async(function(){
var width = this.$.content.scrollWidth;
},1)
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4128 次 |
| 最近记录: |