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

Question

我正在尝试复制这个无用的网站:http://endless.horse ，但是 jScript 文档并没有很好地解释如何实现它。

基本上，我需要一个文本 block “Body”位于顶部，然后一个文本 block “Legs”无限地出现(作为占位符)(参见网站)。

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

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

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

休息.html:

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

代码取自网站

javascript/jquery/jscroll:

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

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

Answer 1

假设您已包含正确的 js 并在文档准备好后运行脚本，则以下代码适用于您:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://unpkg.com/jscroll@2.4.1/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 输出中包含更多字符。