javascript - 隐藏滚动条并使用 CSS 向左向右滑动

Question

我创建了一个框，我想在移动设备上从左向右水平滚动内容，我想使用触摸滑动并隐藏滚动条，这是一个有效的 JSfiddle

我应该尝试使用任何 JSplugin 来处理这个问题还是这很容易做到？请建议

.spotlight_graphs {
  bottom: 30px;
  clear: both;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
  overflow: auto;
  position: absolute;
  right: 0;
  width: 100%;
  background-color:#cbcbcb;
  overflow:auto;
  padding:10px;
}
.spotlight_graphs > ul {
  font-size: 0;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align:left;
  width:200%;
}
.spotlight_graphs > ul > li {
  max-width: 90px;
  width: 33%;
  display:inline-block;
  background-color:#dec8c8;
  height:100px;
  margin:0 5px 5px 0;
  border:1px solid #333333;
}
.spotlight_graphs > ul > li > .graph_detail {
  color: #404040;
  float: left;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

<div class="spotlight_graphs">
  <ul>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
  </ul>
</div>

Answer 1

如果您使用的是 webkit 浏览器，例如 chrome 和 safari，您可以轻松地将以下代码添加到您的 CSS 中。演示 -> https://jsfiddle.net/xzc7khk0/5/

::-webkit-scrollbar { display: none; }