CSS水平滾動技巧

因此，這裏是我的內容：CSS水平滾動技巧

<div class="items_viewed" id="block1"> 
    <div class="item_wrapped"> 
     <div id="item1" class="item">item 1</div> 
     <div id="item2" class="item"></div> 
     <div id="item3" class="item"></div> 
     <div id="item4" class="item"></div> 
     <div id="item5" class="item">item 5</div> 
    </div> 
</div> 
<div class="clear"></div> 
<div class="items_viewed" id="block2"> 
    <div class="item_wrapped"> 
     <div id="item1" class="item">item 1</div> 
     <div id="item2" class="item"></div> 
     <div id="item3" class="item"></div> 
     <div id="item4" class="item"></div> 
     <div id="item5" class="item">item 5</div> 
    </div> 
</div>

的CSS很簡單，因爲它可以得到：

.items_viewed { 
    width:100%; 
    height:410px; 
    overflow:auto; 
} 
.item_wrapped { 
    width:990px; 
} 
.item { 
    height:380px; 
    width:148px; 
    background:#CCCCCC; 
    float:left; 
    margin:4px; 
}

我需要第一block1與item1開始作爲第一個可視item和block2以顯示item5作爲第一個可查看項目。

因此當用戶滾動頁面時，他從右向左滑動block1，從左向右滑動block2。

direction:ltr似乎沒有幫助。而且我不想使用Javascript，因爲它會增加加載時間。

請告知

編輯： http://jsfiddle.net/8of8j0d9/僅供參考

來源

2014-12-30 Shrinivas Acharya

您重複了您的ID。元素ID的意思是獨特的，不應該重複自己，因爲這可能會導致一些/大多數瀏覽器中的錯誤。請確保你永遠不要重複元素ID來避免這種情況。 – jbutler483

這只是虛擬代碼。所有的id都是通過PHP自動生成的，並且在最終輸出中是唯一的 –

如果你不想使用JavaScript，並且需要更改順序或在你的頁面的標籤，我猜你應該改變你的HTML代碼，或者可以用PHP輸出它，以便能夠按照你喜歡的方式重新定購標籤。

來源

2014-12-30 08:56:54 sodawillow

你需要使它們以相反的順序或玩一點點的CSS，是這樣的：

<div class="items_viewed" id="block2"> 
    <div class="item_wrapped right"> 

.item_wrapped.right div { float: right; }

來源

2014-12-30 09:36:38 Zentoaku

我想你所描述的，可以很好地與inplemented flexboxes，僅供參考 場景看看this，

這是我將如何整合呢：

.items_viewed{height:410px; overflow-y:auto; } 
 
.item_wrapped{display:flex; width:500%;} 
 
#block1{overflow-x: scroll;direction:ltr;flex-direction:row-reverse;} 
 
#block2{overflow-x: scroll;direction:rtl;flex-direction:row-reverse;} 
 
.item{height:380px; width:100%; background:#CCCCCC; float:left; margin:4px;}

<div class="items_viewed" id="block1"> 
 
    <div class="item_wrapped top"> 
 
     <div id="item1" class="item">item 1</div> 
 
     <div id="item2" class="item"></div> 
 
     <div id="item3" class="item"></div> 
 
     <div id="item4" class="item"></div> 
 
     <div id="item5" class="item">item 5</div> 
 
    </div> 
 
</div> 
 
<div class="clear"></div> 
 
<div class="items_viewed" id="block2"> 
 
    <div class="item_wrapped bottom"> 
 
     <div id="item1" class="item">item 1</div> 
 
     <div id="item2" class="item"></div> 
 
     <div id="item3" class="item"></div> 
 
     <div id="item4" class="item"></div> 
 
     <div id="item5" class="item">item 5</div> 
 
    </div> 
 
</div>

來源

2014-12-30 10:17:38 maioman

CSS水平滾動技巧

回答

相關問題