如何自动向下滚动div

Question

我有一个主 div，它包含多个子 div。 每个子 div 包含一个句子，通过 setInterval() 函数我改变了子 div 的背景颜色。（就像短时间选择一个句子一样）由于主 div 高度小于子 div 高度的数量，所有句子都可以不会在主 div 中一次显示。 所以我将滚动属性设置为主 div。

假设main div的高度只能显示5个句子，那么我们运行代码可以看到5个句子的背景色一个一个变了，但是不滚动就看不到其他句子的背景色是否变了分区

我需要始终显示更改的背景颜色 div。 这意味着 div 必须自动滚动并显示更改的背景颜色 div。 谁能告诉我如何根据我的需要自动滚动 div？

我的代码：

 var rootNo=1; document.getElementById(rootNo.toString()).style.backgroundColor = '#00BFFF'; var interval = setInterval(function() { document.getElementById(rootNo.toString()).style.backgroundColor = '#FFFF99'; rootNo++; document.getElementById(rootNo.toString()).style.backgroundColor = '#00BFFF'; if(rootNo==30){ clearInterval(interval); } }, 1000);

 .mainDiv{ width: 50%; height: 1%; overflow-y: scroll; background-color: '#FFFF99'; } .subDiv{ width: 100%; height: 10%; background-color: '#FFFF99'; }

 <div class="mainDiv"> <div class="subDiv" id="1">sentence 1</div> <div class="subDiv" id="2">sentence 2</div> <div class="subDiv" id="3">sentence 3</div> <div class="subDiv" id="4">sentence 4</div> <div class="subDiv" id="5">sentence 5</div> <div class="subDiv" id="6">sentence 6</div> <div class="subDiv" id="7">sentence 7</div> <div class="subDiv" id="8">sentence 8</div> <div class="subDiv" id="9">sentence 9</div> <div class="subDiv" id="10">sentence 10</div> <div class="subDiv" id="11">sentence 11</div> <div class="subDiv" id="12">sentence 12</div> <div class="subDiv" id="13">sentence 13</div> <div class="subDiv" id="14">sentence 14</div> <div class="subDiv" id="15">sentence 15</div> <div class="subDiv" id="16">sentence 16</div> <div class="subDiv" id="17">sentence 17</div> <div class="subDiv" id="18">sentence 18</div> <div class="subDiv" id="19">sentence 19</div> <div class="subDiv" id="20">sentence 20</div> <div class="subDiv" id="21">sentence 21</div> <div class="subDiv" id="22">sentence 22</div> <div class="subDiv" id="23">sentence 23</div> <div class="subDiv" id="24">sentence 24</div> <div class="subDiv" id="25">sentence 25</div> <div class="subDiv" id="26">sentence 26</div> <div class="subDiv" id="27">sentence 27</div> <div class="subDiv" id="28">sentence 28</div> <div class="subDiv" id="29">sentence 29</div> <div class="subDiv" id="30">sentence 30</div> </div>

Answer 1

检查这个：

https://jsbin.com/qilorebizo

我修改了你的js：

var rootNo=1;
document.getElementById(rootNo.toString()).style.backgroundColor = '#00BFFF';
var mainDiv = document.getElementsByClassName('mainDiv')[0];

function getSubDivPos(id) {
  var pos = 0;
  var iNode;
  for(var i = 0; i < mainDiv.children.length; i++) {
    iNode = mainDiv.children[i];
    if(iNode.id == id){
      break;
    }
    pos += iNode.clientHeight;
  }
  return pos;
}

var interval = setInterval(function() {
    var currentNode = document.getElementById(rootNo.toString());
    currentNode.style.backgroundColor = '#FFFF99';
    rootNo++;
    var nextNode = document.getElementById(rootNo.toString());
    nextNode.style.backgroundColor = '#00BFFF'; 

    if(rootNo==30){
       clearInterval(interval);
    }

    mainDiv.scrollTop = getSubDivPos(rootNo);
}, 1000);

Answer 2

您可以向下滚动或向上滚动，如下所示：

 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

 <div id="top">Some things here</div> .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here .Some things here ..<a href="#top">TOP</a>

Fiddle注意：由于某种原因，它在 stackoverflow 片段中不能正常工作，但在 jsfiddle 中可以正常工作。