我應該如何在基本HTML頁面中實現jScroll？

Question

我正在嘗試復制這個無用的網站： 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”。

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可用a標簽。 此外，您需要將2000px更改為2000 。 這段代碼對我有用。 不要忘記在rest.html輸出中包含更多字符。