防止div包装，但不添加默认滚动

Question

好吧，所以我对此有点疑惑：正如你在the Polymer Project网站上看到的那样，如果有太多的话，它们都有可水平滚动的标签。我想复制这个效果，但我无法弄清楚如何阻止标签的<div>元素包装以及滚动。显然，JS需要在这里使用。除非可以获得自定义滚动条？

我该怎么办？非jQuery解决方案将非常更好。

Answer 1

给div一个固定的高度和动态长度。其中div的length属性是通过计算div中所需的列数来实现的。

为什么厌恶jquery？

Answer 2

应该能够使用普通的JavaScript或jQuery来比较内部div的计算宽度和外部div的设置宽度。如果#inner宽于#outer，请向其中一个div添加一个类以更改它们的显示方式。如果没有，请删除该课程。

标记：

<div id="outer">
  <div id="inner">
  <div class="scroll-button"></div>
   <!-- your tabs here -->
  <div class="scroll-button"></div>
  </div>
</div>

造型：

#outer{
  width:500px;
  overflow-x:hidden;
}
#outer .scroll-buttons{
  display:none;
}
#outer.has-scroll-buttons .scroll-button{
  display:block;
}