如何实现滚动到 Polymer 3 app-header=layout 中的元素？答案

【问题标题】：How do I implement a scroll to an element in a Polymer 3 app-header=layout?如何实现滚动到 Polymer 3 app-header=layout 中的元素？
【发布时间】：2018-12-19 09:22:10
【问题描述】：

我正在尝试在以下应用页面中实现哈希滚动。

我将函数详细信息的 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>

这是开发者窗口的图像。

【问题讨论】：

因为您要导航的元素位于 dom-repeat 内 dom-if 内，如果您直接导航到 url.com#id，它可能实际上并不存在。此外，请确保 100% 确保 id 实际上在开发人员工具上被正确定义 - 变量的定义方式可能有问题。
我从开发者窗口添加了一张图片，显示了元素中的 id 正确。 id 没有显示在 this.$.** 上。例如this.$.functions
会不会是因为滚动到目标位于 shadow DOM 内部，浏览器实际上无法识别它？检查this other thread。
谢谢！我找到了答案。
我很高兴，接受您自己的回答，以便将问题标记为已关闭。祝你好运！

标签： polymer polymer-3.x

【解决方案1】：

感谢 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();
    }
  }

【讨论】：