IScroll scrollToElement 不工作
IScroll scrollToElement not working
我正在尝试使用 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">
<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>
如您所见,我只是想滚动到 h2 元素,但没有任何反应。
我做错了什么?
提前致谢!
您需要稍微改变一下 HTML。检查此 fiddle。要使 IScroll 正常工作,HTML 和 CSS 中有一些要求。
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 函数,但我无法让它工作。
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>
如您所见,我只是想滚动到 h2 元素,但没有任何反应。
我做错了什么?
提前致谢!
您需要稍微改变一下 HTML。检查此 fiddle。要使 IScroll 正常工作,HTML 和 CSS 中有一些要求。
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>