如何水平滚动内容而不使用滚动条并仅使用CSS

Question

与此站点相同：https://www.tumblr.com/explore/text 您可以看到，当我们拖动上述站点中每个帖子中的hashtags时，它们会自动水平拖动，并且没有任何滚动条。但是，这种效果是由JavaScript与CSS结合创建的。

现在我不知道我们是否可以用纯粹的CSS来做同样的效果。请帮帮我。非常感谢你！

Answer 1

好吧，我想你以后有什么是像下面

http://jsfiddle.net/dd9xqzp2/

您需要鼓捣与它周围一点。

基本上你在隐藏滚动条。它有点笨重，但多数民众赞成你所期望的我猜没有jquery平滑。

的Html

<div class="viewport-clip"> 
    <div class="viewport"> 
    <div class="horizontal"> 
     <div class="item">#test</div> 
     <div class="item">#test1</div> 
     <div class="item">#test2</div> 
     <div class="item">#test3</div> 
     <div class="item">#test4</div> 
     <div class="item">#test5</div> 
    </div> 
    </div> 
</div> 

和CSS

*/ 

.viewport-clip { 
    width: 200px; 
    height: 30px; 
    overflow: hidden; 
} 

.viewport { 
    width: 100px; 
    height: 60px; /* Note the excessive extra height to keep h-scrollbar at bay */ 
    overflow: auto; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

.horizontal { 
    width: 330px; 
    height: 30px; 
} 

.item { 
    width: 50px; 
    float: left; 
    background: white; 
    color:#888; 
    padding-right: 5px; 
    height: 30px; 
}