CSS水平滚动技巧 | CSS水平滚动技巧

本文介绍了CSS水平滚动技巧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这里是我的内容：

 code>似乎没有帮助。 
direction:ltr doesn't seem to be helping. And I don't want to use Javascript since it will increase the load time.
请指定

 
 
推荐答案
我认为您描述的场景可以很好地实现 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水平滚动技巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！