Boel
Boel

Reputation: 976

IScroll scrollToElement not working

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

Upvotes: 0

Views: 1526

Answers (1)

John
John

Reputation: 1489

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>

Upvotes: 1

Related Questions