2015-09-26 75 views
2

我有一個主要的div,它包含了一些子div。每個子div都包含一個句子,通過使用setInterval()函數,我改變了子div的背景顏色(就像短時間選擇一個句子一樣)由於主div高度小於子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>

+0

您打算使用JQuery嗎? – divy3993

+0

@Desi Delite可以根據你想要在哪裏滾動(滾動條)來給出答案。你想要與該主要div或與身體的滾動條?根據這個答案可以做好準備。 – divy3993

+0

是的,有關元素看起來像完全一樣的更多信息將是必需的 - 它是否有固定的尺寸(和溢出),或者它以某種方式響應?如果每個下一個顯而易見的句子都滾動到一個一個或每當邊緣到達,滾動一個較大的數量,以完全顯示下一個羣集... – Shikkediel

回答

2

檢查:

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

謝謝..你的回答對我來說真的很有幫助。 1+ ... –

0

您可以向下滾動或頂部象下面這樣:

$(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 注:由於某種原因,它在不要計算器片段,但在的jsfiddle正常工作正常工作。