Question

我正在使用Polymer 1.x，我有<iron-selector>生成的链接。我希望我的一个链接滚动到<div>。但是，由于链接被<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();'
    }
  ];

链接到a以设置我的

的核心部分

然而，正如在本地DOM中一样，它没有检测到#contactSection。我也尝试使用函数并注册一个监听器，但没有成功。

任何提示？

Answer 1

您可以通过在<div>事件的tap事件上<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 }）。
我们采用Polymer.dom(this.root).querySelector(...)（例如<div>）并使用listener查询本地DOM，以及scrollIntoView()的简写。
然后我们获取上一个调用的结果（<div>），并在其上调用{{1}}，这会将{{1}}带入视口。

使用<iron-pages>时，聚合物href链接锚点不会滚动到div

1 个答案: