單個滾動2個相同的佈局在不同的div？

我有一個頁面上的表結構像2個div。我想讓它們響應並且當前唯一的方法是在某個點之後進行水平滾動。div位於不同的包裝/容器中，因此不能將它們移動到一個包裝中。 我的問題是我只想要一個水平滾動而不是兩個。做這個的最好方式是什麼？，讓他們有一個滾動水平移動。單個滾動2個相同的佈局在不同的div？

下面是什麼我想（問題）

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.ScrollWrapper1 { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    float: left; 
 
} 
 
.ScrollWrapper2 { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    float: left; 
 
} 
 

 
.TableHead { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 

 
.row { 
 
    float: left; 
 
    width: calc(10% - 1px); 
 
    text-align: center; 
 
    border-right: 1px solid #ccc 
 
} 
 

 
.marginTop40 { 
 
    margin-top: 40px; 
 
} 
 

 
.ScrollWrapper h1 { 
 
    margin: 20px 0; 
 
} 
 

 
@media(max-width:1024px) { 
 
    .TableHead { 
 
    width: 1024px; 
 
    overflow: hidden 
 
    } 
 
}

<div class="ScrollWrapper1"> 
 
<h1>Div on page with table format</h1> 
 
    <div class="TableHead"> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 

 
    </div> 
 

 
</div> 
 

 
<div class="ScrollWrapper2 marginTop40"> 
 
    <h1>Another div on page with table format</h1> 
 
    <div class="TableHead"> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 

 

 
    </div> 
 

 
</div>

來源

2017-04-06 Sahil Dhir

如果你不能改變HTML，你可能不得不使用JS - > http://stackoverflow.com/questions/32537316/how-to-scroll-two-div-elements-at-the-same時間 – sol

是的，它幫助了我@ovokuro。非常感謝 –

獲取向左滾動當前滾動格，然後將其綁定到其他分區

$('.ScrollWrapper').on('scroll', function(){ 
 
    var _left = $(this).scrollLeft(); 
 
    $('.ScrollWrapper').scrollLeft(_left) 
 
})

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.ScrollWrapper { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    float: left; 
 
} 
 

 
.TableHead { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 

 
.row { 
 
    float: left; 
 
    width: calc(10% - 1px); 
 
    text-align: center; 
 
    border-right: 1px solid #ccc 
 
} 
 

 
.marginTop40 { 
 
    margin-top: 40px; 
 
} 
 

 
.ScrollWrapper h1 { 
 
    margin: 20px 0; 
 
} 
 

 
@media(max-width:1024px) { 
 
    .TableHead { 
 
    width: 1024px; 
 
    overflow: hidden 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ScrollWrapper"> 
 
<h1>Div on page with table format</h1> 
 
    <div class="TableHead"> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 
    <div class="row">Table 1</div> 
 

 
    </div> 
 

 
</div> 
 

 
<div class="ScrollWrapper marginTop40"> 
 
    <h1>Another div on page with table format</h1> 
 
    <div class="TableHead"> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 
    <div class="row">Table 2</div> 
 

 

 
    </div> 
 

 
</div>

來源

2017-04-06 11:28:23

非常感謝Abhishek..Also to @ovokuro指向正確的示例代碼。 –

我很高興能爲您提供幫助，@ovokuro也不錯，但在這種情況下太冗長。 –

他給了我一個答案的鏈接，但你實際上回答了它。保持良好的工作pandey ji：P –

單個滾動2個相同的佈局在不同的div？

回答

相關問題