CSS水平滚动技巧 [英] CSS Horizontal Scroll tricks

问题描述

这里是我的内容：

<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很简单，它可以得到：

The CSS is as simple as it can get:

.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 作为第一个可查看项目，并以 block2 开始显示 item5 作为第一个可见项。

I need the first block1 to start with item1 as the first viewable item and block2 to show item5 as the first viewable item.

因此，当用户滚动页面时，他从右向左滑动 block1

Thus when the user scrolls the page, he swipes right to left for block1 and left to right for block2.

方向：ltr code>似乎没有帮助。

direction:ltr doesn't seem to be helping. And I don't want to use Javascript since it will increase the load time.

请指定

编辑：
http://jsfiddle.net/8of8j0d9/ 只为参考

推荐答案

我认为您描述的场景可以很好地实现 flexboxes
以供参考，请查看这，

I think the scenario you're describing could be nicely inplemented with flexboxes, for reference take a look at 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>

这篇关于CSS水平滚动技巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！