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);

否则，您需要检测哪个元素是＆＃34;当前＆＃34;一，然后得到它的下一个兄弟，然后滚动到它。像这样的东西（没有经过测试，所以语法可能会关闭，但这应该会给你一个想法）

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);

动态ScrollTo函数需要下一个元素

1 个答案: