Полимер href link anchor не прокручивает до div при использовании <iron-pages>

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();' 
    } 
    ]; 

связан с установить основную часть моей

Однако, как это в локальный DOM, он не обнаруживает #contactSection. Я также попытался использовать функцию и зарегистрировать слушателя, но безуспешно.

Любые подсказки?

Answer 1

Вы можете обойти эту проблему путем императивно прокрутки <div> в поле зрения с listener на 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) и запрашиваем локальную DOM для него с this.$$(...) - стенограмма для Polymer.dom(this.root).querySelector(...).
• Затем мы берем результат предыдущего вызова (который является <div>) и вызываем на нем scrollIntoView(), который приносит <div> в область просмотра.