2015-09-21 2 views
0

Я пытаюсь использовать функцию scrollToElement из библиотеки IScroll, но я не могу заставить ее работать.IScroll scrollToElement не работает

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"> 
 
    \t <h1>This is H1</h1> 
 

 
    \t <h1>This is H2</h1> 
 

 
    \t <h1>This is H3</h1> 
 

 
    \t <h1>This is H4</h1> 
 

 
    \t <h1>This is H5</h1> 
 

 
    \t <h1>This is H6</h1> 
 

 
    \t <h1>This is H7</h1> 
 

 
    \t <h1>This is H8</h1> 
 

 
    \t <h1>This is H9</h1> 
 

 
    \t <h1>This is H10</h1> 
 

 
    \t <h1>This is H11</h1> 
 

 
    \t <h2>This is H12</h2> 
 

 
    \t <h1>This is H13</h1> 
 

 
    \t <h1>This is H14</h1> 
 

 
    \t <h1>This is H15</h1> 
 

 
    \t <h1>This is H16</h1> 
 

 
    \t <h1>This is H17</h1> 
 

 
    \t <h1>This is H18</h1> 
 

 
    \t <h1>This is H19</h1> 
 

 
</div>

Как вы можете видеть, я просто пытаюсь, чтобы перейти к элементу h2, но ничего не происходит.

Что я делаю неправильно?

Заранее благодарен!

jsfiddle

ответ

1

Вам нужно немного изменить HTML. Проверьте это fiddle. Есть некоторые требования к HTML и CSS для работы IScroll.

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>