代码之家 › 专栏 › 技术社区 › Loren Cahlander

如何实现对Polymer 3应用程序标题=布局中元素的滚动?

polymer-3.x polymer

1

Loren Cahlander · 技术社区 · 7 年前

我正在尝试在下面的应用程序页面中实现哈希滚动到。

我正在将函数详细信息的id设置为函数的名称。当我将散列添加到名为的函数的URL时,在app header=layout的内容中没有滚动到。我错过了什么?

  <iron-location id="sourceLocation" query="{{query}}" hash="{{hash}}"></iron-location>
  <iron-query-params id="sourceParams" params-string="{{query}}" params-object="{{params}}"></iron-query-params>
  <iron-ajax auto="true" 
    url="/v1/resources/xqdoc"  
    params="[[params]]"
    handle-as="json"
    last-response="{{result}}"></iron-ajax>
  <app-drawer-layout>
    <app-drawer slot="drawer">
      <app-toolbar>
        <div main-title>Modules</div>
      </app-toolbar>
    <section>
    <paper-listbox attr-for-selected="item-name" selected="{{selectedSuggestionId}}" fallback-selection="None">
      <h3>Libraries</h3>
      <template is="dom-repeat" items="[[result.modules.libraries]]">
        <paper-item item-name="[[item.uri]]">[[item.uri]]</paper-item>
      </template>
      <h3>Mains</h3>
      <template is="dom-repeat" items="[[result.modules.main]]">
        <paper-item item-name="[[item.uri]]">[[item.uri]]</paper-item>
      </template>
    </paper-listbox>
      <div style="margin-bottom:90px;width:100%;"></div>
    </section>
    </app-drawer>
    <app-header-layout>
      <app-header slot="header" reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>xqDoc</div>
        <paper-toggle-button checked="{{showHealth}}">Show Documentation Health</paper-toggle-button>
      </app-toolbar>
      </app-header>
    <section>
      <template is="dom-if" if="{{result.response.uri}}">
        <xqdoc-module show-health="[[showHealth]]" item="{{result.response}}"></xqdoc-module>
        <template is="dom-repeat" items="{{result.response.imports}}">
          <import-detail item="{{item}}"></import-detail>
        </template>
        <template is="dom-repeat" items="{{result.response.variables}}">
          <variable-detail show-health="[[showHealth]]" item="{{item}}" params="{{params}}" hash="{{hash}}"></variable-detail>
        </template>
        <template is="dom-repeat" items="{{result.response.functions}}">
          <function-detail id$="[[item.name]]" show-health="[[showHealth]]" item="{{item}}" params="{{params}}" hash="{{hash}}"></function-detail>
        </template>
      </template>
      <paper-card>Created by xqDoc version [[result.response.control.version]] on [[result.response.control.date]]</paper-card>
      <div style="margin-bottom:200px;height:150px;width:100%;"></div>
    </section>
    </app-header-layout>
  </app-drawer-layout>

这是“开发人员”窗口的图像。

1 回复 | 直到 7 年前

1

Loren Cahlander 7 年前

多亏了AmmpPT,我找到了我的答案:

我曾经 this.shadowRoot.querySelector('#id') 获取元素,然后使用 scrollIntoView()

  static get properties() {
    return {
      result: { type: Object, notify: true },
      params: { type: Object, notify: true },
      hash: { type: String, notify: true, observer: '_hashChanged' },
      showHealth: { type: Boolean, notify: true, value: false },
      selectedSuggestionId: { type: String, notify: true, observer: '_moduleSelected' }
    };
  }

  _hashChanged(newValue, oldValue) {
    var a= '#' + newValue;
    var b = this.shadowRoot.querySelector(a);

    if (b) {
      b.scrollIntoView();
    }
  }