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

我认为最简单的方法就是只使用CSS并将物品旋转90度。

你可以在这里找到它解释得很好：在这里a link！你可以在哪里找到这个解决方案。

另一种解决方案是将具有滚动条的div放入另一个高度小于滚动div并且隐藏溢出的div中，以覆盖滚动条，如下所示：

.hideScroll {
  height: 129px;
  overflow: hidden;
  position: relative;
}

我在这里编辑了你的小提琴：https://jsfiddle.net/xzc7khk0/6

Answer 2

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

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

Answer 3

你可以用CSS来做这件事，就像@Stan George所说的那样。

但是这个css仅适用于移动设备，因为你想在移动设备中消失滚动条，所以在你的可滚动div上应用css。

.spotlight_graphs::-webkit-scrollbar{
    background-color:transparent;
}

它将消失滚动条而不滚动。

Answer 4

易于使用css Webkit

html {
    overflow: scroll;
    overflow-x: hidden;
}
.spotlight_graphs::-webkit-scrollbar {
    width: 0px;  //remove scrollbar width 
    background: transparent;  //optional: it will make scrollbar invisible
}

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

4 个答案: