javascript - 如何在基本的HTML页面中实现jScroll？

我正在尝试复制这个无用的网站：http://endless.horse，但是jScript文档在解释如何实现它方面做得并不出色。

基本上，我需要在顶部放置一个文本块“ Body”，然后使一个文本“ Legs”块无限显示（作为占位符）（请参见网站）。

我尝试添加网站上说的内容：http://jscroll.com，但是它只显示“ [element] .jscroll（）”，仅此而已。我也尝试过从网站复制代码，但这也不起作用。

这是我正在使用的代码：
应滚动的DIV：

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>

rest.html：

<pre>
    Legs
</pre>
<a href="rest.html"></a>

代码取自网站

javascript / jquery / jscroll：

$(function() {
    $('.jscroll').jscroll({
        autoTrigger: true,
        padding: 2000px,
        nextSelector: "rest.html"
    });
});

我以为我会得到一个带有“ Body”和“ Legs”的滚动网页，但是我只有“ Body”。

最佳答案

假设您已经包含了正确的js，并且在文档准备就绪时运行了脚本，那么以下代码将为您工作：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.jscroll.min.js"></script>

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  $(function() {
      $('.jscroll').jscroll({
          autoTrigger: true,
          padding: 2000,
          nextSelector: "a:last"
      });
  });
});

</script>

基本上，您需要将nextSelector更改为更具体，并且必须放置一个真正的jquery选择器。 'a：last'总是选择最后一个可用的a标记。另外，您需要将2000px更改为2000。这段代码对我有用。不要忘记在rest.html输出中包含更多字符。

关于javascript - 如何在基本的HTML页面中实现jScroll？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55458983/