如何水平滾動內容而不使用滾動條並僅使用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; 
}