Question

我有一个主div，它包含多个子div。每个子div包含一个句子，并且通过使用setInterval（）函数，我改变了子div背景颜色。（就像短时间选择一个句子一样）因为主div高度小于sub divs的高度，所有句子都可以在主要的div中立刻显示出来。所以我将scroll属性设置为main div。

假设主div高度只能显示5个句子。然后，当我们运行代码时，我们可以看到5个句子逐个改变背景颜色，但我们无法看到其他句子是否改变了他们的背景颜色没有滚动div。

我需要始终显示更改的背景颜色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

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

＆＃13;

$(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;
                }
            }
        });
    });

＆＃13;

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

＆＃13;

Fiddle 注意：由于某些原因，它在stackoverflow片段中无法正常工作，但在jsfiddle工作正常。

如何自动向下滚动div

2 个答案: