javascript - 防止 div 换行，但不添加默认滚动条

Question

好吧，所以我对此有点困惑:正如您在网站上看到的 the Polymer Project ，如果有太多，它们有可以水平滚动的选项卡。我想复制这种效果，但我不知道如何同时防止 <div>标签的元素从包装 以及 滚动。很明显，这里就需要用到JS了。除非有可能获得自定义滚动条？

我怎样才能做到以上几点？非 jQuery 解决方案将非常更可取。

Answer 1

应该能够使用纯 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;
}