CODEWITHSUNDEEP
javascriptpolymerweb-component
Hiep
Hiep

Reputation: 2612

How to scroll programmatically in a polymer component

My polymer component is displaying a static HTML content as following

<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>

I want to scroll the preview div to the 

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

How can we do this?

Upvotes: 1

Views: 282

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Make the scrolling on the attached callback

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

Upvotes: 1

Related Questions