Question

在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函数，但它也没有用。

当我稍后尝试访问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>

因此内部文本决定了元素的尺寸。

Answer 1

事实证明我的原始代码在Safari中有效，但在Chrome中无效。

根据Zikes建议，我添加了一些异步，现在它适用于两种浏览器。

最终答案：

attached: function() {
    this.async(function(){
        var width = this.$.content.scrollWidth;
    },1)
}

Answer 2

另一种选择是＆＃34;冲洗＆＃34;在使用它之前使用DOM。在这种情况下，代码将是：

attached: function() {
  var width;
  Polymer.dom.flush();
  width = this.$.content.scrollWidth;
},

由于这是同步的，声明性的，并且不涉及闭包，因此可以更容易使用。

更多信息：https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api

domReady vs ready - 迁移到Polymer 1.0

2 个答案: