沒有用戶互動scrollToElement

我正在尋找創建一個網頁，滾動從一個元素到下一個連續的循環，沒有任何用戶交互。我已經搜索，它看起來像scrollToElement是我正在尋找（實際上從this answer on another post小提琴是類似的，但有用戶交互）。不幸的是，一切似乎都是通過點擊完成或不循環。我對JS相當陌生，但我覺得它應該是可行的。任何幫助表示讚賞。沒有用戶互動scrollToElement

來源

2017-04-20 Acedrew

您可以包括任何你已經試過，給我們你想要做什麼的詳細信息標記？你只是想滾動到幾個元素，循環回來，無限重複或什麼？ –

是的，我只是尋找當頁面加載有一個設置的時間間隔從頁面中的一個元素滾動到下一個，然後回滾到頂部，然後再次開始。到目前爲止，我還沒有嘗試太多，因爲我不確定從哪裏開始。真的，我不是在尋找直接的代碼，而是從哪裏開始。 – Acedrew

下面是使用jQuery使用setInterval()和$.animate()滾動到部分的快速示例。

var $sections = $('section'), 
 
    count = 1, 
 
    speed = 250, 
 
    delay = 2000; 
 

 
var interval = setInterval(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: $sections.eq(count).offset().top 
 
    }, speed); 
 
    count = (count + 1) % $sections.length; 
 
}, delay)

section { 
 
    height: 200vh; 
 
    background: red; 
 
} 
 
section:nth-child(2) { 
 
    background: blue; 
 
} 
 
section:nth-child(3) { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section></section> 
 
<section></section> 
 
<section></section>

來源

2017-04-20 16:38:46

謝謝！奇蹟般有效！ – Acedrew

@Acedrew沒有汗！ –

如何創建一個函數調用scrollToElement，然後將其設置爲setInterval（）中的CB函數。閱讀更多：MDN

來源

2017-04-20 16:18:15

我喜歡這個，謝謝指點我setInterval（）。我可以將它設置爲包含我想要循環的每個元素的ID的數組嗎？ – Acedrew

沒有用戶互動scrollToElement

回答

相關問題