IScroll scrollToElement not working

Question

I'm trying to use the scrollToElement function from the IScroll library, but I can't get it to work.

 new IScroll(document.querySelector(".wrapper")).scrollToElement(document.querySelector("h2"));

 .wrapper { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.js"></script> <div class="wrapper"> <h1>This is H1</h1> <h1>This is H2</h1> <h1>This is H3</h1> <h1>This is H4</h1> <h1>This is H5</h1> <h1>This is H6</h1> <h1>This is H7</h1> <h1>This is H8</h1> <h1>This is H9</h1> <h1>This is H10</h1> <h1>This is H11</h1> <h2>This is H12</h2> <h1>This is H13</h1> <h1>This is H14</h1> <h1>This is H15</h1> <h1>This is H16</h1> <h1>This is H17</h1> <h1>This is H18</h1> <h1>This is H19</h1> </div>

As you can see, I'm just trying to scroll to the h2 element, but nothing happens.

What am I doing wrong?

Thanks in advance!

jsfiddle

Answer 1

You need to slightly change your HTML. Check this fiddle . There are some requirements in HTML and CSS for IScroll to work.

 var test = new IScroll(".wrapper").scrollToElement("h2");

 .wrapper { position: relative; } #scroller { position: absolute; }

 <body> <div class="wrapper"> <div id="scroller"> <h1>This is H1</h1> <h1>This is H2</h1> <h1>This is H3</h1> <h1>This is H4</h1> <h1>This is H5</h1> <h1>This is H6</h1> <h1>This is H7</h1> <h1>This is H8</h1> <h1>This is H9</h1> <h1>This is H10</h1> <h1>This is H11</h1> <h2>This is H12</h2> <h1>This is H13</h1> <h1>This is H14</h1> <h1>This is H15</h1> <h1>This is H16</h1> <h1>This is H17</h1> <h1>This is H18</h1> <h1>This is H19</h1> </div> </div> </body>

IScroll scrollToElement not working

Question

1 answers

solution1
1 ACCPTED 2015-09-21 09:43:48

IScroll scrollToElement not working

Question

1 answers

solution1 1 ACCPTED 2015-09-21 09:43:48

solution1
1 ACCPTED 2015-09-21 09:43:48