如何在一段時間

Question

我想在一段時間內的jQuery或純JavaScript滾動紅色的div 可能在DIV綠色滾動滾動2個格????

<div class="parentDiv"> 
    <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br> 
    <br>nothing to see here <br> 
    <br>nothing to see here <br> 
    <br>nothing to see here <br> 
     <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br> 
    <br>nothing to see here <br> 
    <br>nothing to see here <br> 
    <br>nothing to see here <br> 


    </p> 
      <div class="childDiv"> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     v 
     this should scroll only form outside and inside<br> 
    </div> 
</div> 

http://jsfiddle.net/y1byh25d/6/

Answer 1

要監視的scroll事件的元素的您滾動的，那麼你可以採取的scrollTop值，並將其應用到要與它一起滾動股利。

下面是你將如何在jQuery中做到這一點。

$('.childDiv').on('scroll',function() { 
 
\t $('.parentDiv').scrollTop($(this).scrollTop()); 
 
})

.parentDiv 
 
{ 
 
    background-color: red; 
 
    height: 400px; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 
.parentDiv::-webkit-scrollbar{ 
 
    display: none; 
 
} 
 

 
.childDiv 
 
{ 
 
    background-color: green; 
 
    height: 100px; 
 
    width: 300px; 
 
    overflow: scroll; 
 
    position: fixed; 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parentDiv"> 
 
    <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br> 
 
    <br>nothing to see here <br> 
 
    <br>nothing to see here <br> 
 
    <br>nothing to see here <br> 
 
     <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br> 
 
    <br>nothing to see here <br> 
 
    <br>nothing to see here <br> 
 
    <br>nothing to see here <br> 
 
    
 
    
 
    </p> 
 
      <div class="childDiv"> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     v 
 
     this should scroll only form outside and inside<br> 
 
    </div> 
 
</div>