Dynamic Sc​​rollTo功能需要下一個元素

Question

請看看我的例子。

我在我的網站上有多行和一個scrollto（）按鈕，它總是在屏幕的底部。

根據用戶在某個時刻在我的網站上的位置，我希望他在點擊按鈕之後移動到下一行。

我知道如何讓用戶scrollto（），但我不知道我應該使用什麼樣的選擇器。

function myFunction() { 
 
var winScroll = window.scrollTop; // current scroll of window 
 
// find closest div 
 
var rows = document.querySelectorAll('.row'); 
 
var closest = rows[0]; // first section 
 
var closest_idx = 0; 
 
var min = closest.offsetTop - winScroll; 
 
rows.forEach(function(row, index) { 
 
    var divTopSpace = row.offsetTop - winScroll; 
 
    if(divTopSpace < min && divTopSpace > 0) { 
 
     closest = row; 
 
     closest_idx = index; 
 
     min = divTopSpace; 
 
    } 
 
}); 
 
var next_idx = closest_idx + 1; 
 
if (next_idx == rows.length) { 
 
    next_idx = 0; 
 
} 
 
console.log(rows[next_idx]); 
 
}

.rowOne { 
 
    height: 100vh; 
 
    background-color: peachpuff; 
 
} 
 

 
.rowTwo { 
 
    height: 100vh; 
 
    background-color: firebrick; 
 
} 
 

 
.rowThree { 
 
    height: 100vh; 
 
    background-color: deepskyblue; 
 
} 
 

 
.btn { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 30px; 
 
}

<div class="main"> 
 
    <div class="row rowOne"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Foo 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row rowTwo"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Bar 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row rowThree"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Foobar 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <button id="btn" class="btn" onclick="myFunction()">Button</button> 
 
</div>

預先感謝您。

Answer 1

由於它們的高度都是相同的（窗口高度的100％），所以簡單的解決方法就是簡單地按照該數量滾動。

window.scrollBy(0, window.innerHeight); 

否則，你需要檢測哪些元素是「當前」之一，然後得到它的下一個兄弟，然後滾動到它。像這樣的東西（沒有測試過，所以語法可能是關閉的，但這應該給你一個想法）

var winScroll = window.scrollTop; // current scroll of window 
// find closest div 
var rows = document.querySelectorAll('.row'); 
var closest = rows[0]; // first section 
var closest_idx = 0; 
var min = closest.offsetTop - winScroll; 
rows.forEach(function(row, index) { 
    var divTopSpace = row.offsetTop - winScroll; 
    if(divTopSpave < min && divTopSpave > 0) { 
     closest = row; 
     closest_idx = index; 
     min = divTopSpace; 
    } 
}); 
var next_idx = closest_idx + 1; 
if (next_idx == rows.length) { 
    next_idx = 0; 
} 
window.scrollTo(rows[next_idx].scrollTop);