1つのdivで垂直方向にスクロールすると同時に水平方向にスクロールする別のdivに影響する方法

Question

2つのdiv、AとBがある場合、Aで垂直方向にスクロールするとdiv Bも同様に移動する必要があります水平方向の時間。

私はこの問題を解決し、可能であれば、フレームワークのない解決策を見つけ出すことができませんでした。このため

click here to see what I mean in on picture

.content-up-down { 
 
\t background: pink; 
 
\t margin: auto; 
 
\t width : 400px; 
 
\t height: 300px; 
 
\t overflow-y: scroll; 
 
} 
 

 
.content-1 { 
 
\t background: rgb(250,230,230); 
 
\t padding : 32px; 
 
\t margin: 16px; 
 
} 
 

 
.content-left-right { 
 
\t background: rgb(200,250,200); 
 
\t margin: auto; 
 
\t margin-top:32px; 
 
\t padding-top: 16px; 
 
\t 
 
\t width : 400px; 
 
\t height: 96px; 
 
\t overflow-x: scroll; 
 
\t overflow-y: hidden; 
 
} 
 

 
.wrap-content-2 { 
 
\t white-space: nowrap; 
 
} 
 

 
.content-2 { 
 
\t background: rgb(100,255,150); 
 
\t display: inline-block; 
 
\t width:64px; 
 
\t height: 64px; 
 
\t margin:0px 32px; 
 
}

<div class="content-up-down"> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> 
 
\t \t \t <div class="content-1"> </div> \t 
 
\t \t </div> 
 

 
\t \t <div class="content-left-right"> 
 
\t \t \t <div class="wrap-content-2"> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t \t <div class="content-2"> </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

、あなたはjQueryのを使用して、ピンクのdivのスクロールをリッスンする必要があります。ここでは概算です：

$(".pink").scroll(function() { 
 
    $(".green").scrollLeft(($(".pink").scrollTop()/$(".pink").height()) * $(".green").width()); 
 
});

.pink { 
 
    background-color: pink; 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
    padding: 10px; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
    height: 25px; 
 
    overflow-x: scroll; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pink"> 
 
a 
 
<br> 
 
    b 
 
    <br> 
 
    c 
 
    <br> 
 
    d 
 
    <br> 
 
    a 
 
    <br> 
 
    b 
 
    <br> 
 
    c 
 
    <br> 
 
    d 
 
    <br> 
 
    a 
 
    <br> 
 
    b 
 
    <br> 
 
    c 
 
    <br> 
 
    d 
 
    <br> 
 
    a 
 
    <br> 
 
    b 
 
    <br> 
 
    c 
 
    <br> 
 
    d 
 
    <br> 
 
    a 
 
    <br> 
 
    b 
 
    <br> 
 
    c 
 
    <br> 
 
    d 
 
    <br> 
 
</div> 
 

 
<div class="green"> efghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghef 
 
</div>

は、コードが十分に理にかなって願っています。