【发布时间】：2015-10-02 16:37:56
【问题描述】：
我有一个主 div，它包含多个子 div。每个子 div 包含一个句子，通过使用 setInterval() 函数我改变了子 div 的背景颜色。（就像短时间选择一个句子一样）由于主 div 高度小于子 div 的高度数，所有句子都可以'不在主 div 中立即显示。所以我将滚动属性设置为主 div。
假设main div height只能显示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>【问题讨论】：
-
你打算使用 JQuery 吗？
-
@Desi Delite 可以根据您想要滚动的位置（滚动条）给出答案。你想让滚动条与主 div 还是与 body 保持一致？可以根据这个答案准备。
-
是的，需要更多关于元素外观的信息 - 它是否具有固定尺寸（和溢出）或者它是否以某种方式响应？如果每个下一个可见句子一个接一个地滚动，或者每当到达边缘时，滚动更大的量以完全显示下一个集群...
-
@Shikkediel & @divy3993 ，其实我需要这样的东西。当主div高度小于子div高度之和时，我们需要滚动主div才能看到所有其他子div。当您运行此代码时，您可以看到子 div 的背景颜色一个一个地变化并且它下降了。我们可以在第一个子 div 集中看到这种颜色的变化。然后如果不滚动主 div，我们就看不到这种变化。我需要知道是否有任何方法可以显示更改颜色 div 而无需我们滚动。我们可以通过自动滚动来聚焦每个变化的颜色 div。这个给出的答案不是我想要的答案。
标签： javascript html css