如何在聚合物組分編程滾動

Question

我的聚合物組分顯示靜態HTML內容如下

<link rel="import" href="../bower_components/polymer/polymer.html"> 

<dom-module id="x-scroll"> 
    <template> 
     <div id="preview"> 
      <h1 data-sourcepos="1:1-2:28">Sample Markdown Cheat Sheet</h1> 
      <p data-sourcepos="4:1-4:68">This is a sample markdown file to help you write Markdown quickly :)</p> 
      <p data-sourcepos="6:1-6:226">If you use the fabulous <a href="http://sublimetext.com">Sublime Text 2/3 editor</a> along with the <a href="https://github.com/revolunet/sublimetext-markdown-preview">Markdown Preview plugin</a>, open your ST2 Palette with <code>CMD+⇧+P</code> then choose <code>Markdown Preview in browser</code> to see the result in your browser.</p> 
      <h2 data-sourcepos="8:1-8:14">Text basics</h2> 
      <p data-sourcepos="9:1-9:78">this is <em>italic</em> and this is <strong>bold</strong> . another <em>italic</em> and another <strong>bold</strong></p> 
      <p data-sourcepos="11:1-11:58">this is <code>important</code> text. and percentage signs : % and <code>%</code></p> 
      <p data-sourcepos="13:1-13:69">This is a paragraph with a footnote (builtin parser only). [^note-id]</p> 
      <p data-sourcepos="15:1-15:87">Insert <code>[ TOC ]</code> without spaces to generate a table of contents (builtin parsers only).</p> 
      <h2 data-sourcepos="17:1-17:14">Indentation</h2> 
      <blockquote data-sourcepos="18:1-19:21"> 
       <p data-sourcepos="18:3-18:28">Here is some indented text</p> 
       <blockquote data-sourcepos="19:2-19:21"> 
        <p data-sourcepos="19:4-19:21">even more indented</p> 
       </blockquote> 
      </blockquote> 
     </div> 
     <style> 
      #preview { 
       overflow: scroll; 
       resize: vertical; 
       width: 100%; 
       height: 300px; 
      } 
     </style> 
    </template> 
    <script> 
     Polymer({ 
      is: "x-scroll", 
      ready: function(){ 
       //I want to scroll to this element but don't know how 
       var scrollTo = this.$.preview.querySelector('h2[data-sourcepos="17:1-17:14"]'); 
      } 
     }); 
    </script> 
</dom-module> 

我想了preview DIV滾動到

<h2 data-sourcepos="17:1-17:14">Indentation</h2> 

我們怎樣才能做到這一點？

Answer 1

使滾動的attached回調

attached: function() { 
    var scrollTo = this.$.preview.querySelector('h2[data-sourcepos="17:1-17:14"]'); 
    scrollTo.scrollIntoView(); 
}