2017-04-16 2 views
1

divをスクロールしたいときに赤いdivをスクロールする jQueryまたはpure javascriptで可能ですか?いくつかの時間に2つのdivをスクロールする方法

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

+3

? http://jsfiddle.net/y1byh25d/7/ –

+0

はい、Dありがとうございます http://jsfiddle.net/y1byh25d/8/ –

+0

よろしくお願いします。それがあなたが求めていたものかどうかは分かりませんでした。答えとして提出されます。 –

答えて

0

あなたは、あなたがscrollTop値を取ると、あなたはそれと一緒にスクロールしたいのdivに適用することができます、あなたがスクロールしている要素のscrollイベントを監視したいです。

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>

関連する問題