jquery - 如何在没有滚动条且仅使用 CSS 的情况下水平滚动内容

Question

同本站:https://www.tumblr.com/explore/text可以看到，当我们在上面的站点中拖动每个帖子中的标签时，它们会自动水平拉动，并且没有任何滚动条。但是这个效果是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;
}