使用 <iron-pages> 时，Polymer href link 锚点不会滚动到 div

Question

我正在使用 Polymer 1.x，我有一个 <iron-selector> 和生成的 link。我想让我的 link 之一滚动到 <div>。但是，由于 link 被 <iron-pages> 拦截，我无法成功实现此目的。到目前为止，这是我尝试过的方法：

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<iron-selector role="navigation" class="drawer-list" selected="[[categoryName]]" attr-for-selected="name">
    <template is="dom-repeat" items="[[categories]]" as="category" initial-count="4">
        <a name="[[category.name]]" href="[[category.link]]">[[category.title]]</a>
    </template>
</iron-selector>

<section id="contactSection" class="home-contact ss-style-triangles">
    <div class="container">
        <div class="contact-wrap">
            <h1>Contact</h1>
        </div>
    </div>
</section>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
  <!-- home view -->
    <cass-home name="home"></cass-home>
    <cass-why name="whyChooseUs" route="{{subroute}}"></cass-why>
    <cass-partner name="partner" route="{{subroute}}"></cass-partner>
    <cass-404-warning name="404"></cass-404-warning>
</iron-pages>

然后在 JavaScript:

var categoryList = [
    {
        name: 'home',
        title: 'Accueil',
        link: '/home',
    },
    {
        name: 'home',
        title: 'Home',
        link: '/home',
    },
    {
        name: 'b2b',
        title: 'Company',
        link: '/b2b',
    },
    {
        name: 'login',
        title: 'Connection',
        link:'/login'
    },
    {
        name: 'contact',
        title: 'Contact',
        link:'javascript:document.querySelector("#contactSection").scrollIntoView();'
    }
  ];

link用于设置我的

的核心部分

但是，由于它在本地 DOM，它没有检测到 #contactSection。我也尝试过使用一个函数并注册一个监听器，但没有成功。

有什么提示吗？

Answer 1

您可以通过在锚点的 tap 事件上使用 listener 强制滚动 <div> 进入视图来解决该问题：

<a href="#aboutSection" on-tap="_onTapAnchor">About</a>
<a href="#contactSection" on-tap="_onTapAnchor">Contact</a>

// <script>
_onTapAnchor: function(e) {
  e.preventDefault();
  var anchor = e.target.attributes.href.value;
  this.$$(anchor).scrollIntoView();
}

备注：

e.target 是 <a> 标签，它有一个 attributes 映射，包含 href 的原始值（#contactSection 相对于 http://localhost:8080/#contactSection).
我们取 e.target.attributes.href.value（例如，#contactSection）并用 this.$$(...) 查询本地 DOM -- shorthand for Polymer.dom(this.root).querySelector(...).
然后我们获取之前调用的结果（<div>），并对其调用 scrollIntoView()，这会将 <div> 带入视口。

使用 <iron-pages> 时，Polymer href link 锚点不会滚动到 div

Polymer href link anchor does not scroll to div when using <iron-pages>

html

polymer

polymer-1.0