Javascript 隐藏滚动条并使用CSS左右滑动

我已经创建了一个框，我想在手机上从左到右水平滚动内容，我想用触摸键滑动并隐藏滚动条，下面是一个工作示例

我是否应该尝试任何JSplugin来处理这个问题，或者这是很容易做到的？请建议

.spotlight\u图形{
底部：30px；
明确：两者皆有；
左：0；
左边距：自动；
右边距：自动；
最大宽度：360px；
溢出：自动；
位置：绝对位置；
右：0；
宽度：100%；
背景色：#CBCB；
溢出：自动；
填充：10px；
}
.spotlight_graphs>ul{
字号：0；
列表样式：外部无；
保证金：0；
填充：0；
文本对齐：左对齐；
宽度：200%；
}
.spotlight_graphs>ul>li{
最大宽度：90px；
宽度：33%；
显示：内联块；
背景色：#dec8c8；
高度：100px；
边距：0 5px 5px 0；
边框：1px实心#333333；
}
.spotlight\u graphs>ul>li>.graph\u detail{
颜色：#404040；
浮动：左；
字体大小：14px；
文本对齐：居中；
文本转换：大写；
宽度：100%；
}

这是假标题


这是假标题


这是假标题


这是假标题


这是假标题

我认为最简单的方法是只使用CSS并将项目旋转90度

你可以在这里找到很好的解释： 给你！在那里你可以找到这个解决方案解释得很好

另一种解决方案是将具有滚动条的div放入另一个高度小于滚动div且溢出隐藏的div中，以便像这样覆盖滚动条：

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

---

我在这里编辑了您的小提琴：

如果您使用的是诸如chrome和safari之类的webkit浏览器，您可以轻松地将以下代码添加到CSS中。演示->

---

正如@Stan George所说，你可以用CSS来实现

但此css仅适用于移动设备，因为您希望在移动设备中消失滚动条，所以请在可滚动div上应用css

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

---

它将在滚动条不滚动时消失。

使用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
}

---

在移动浏览器中，滚动条不会像在桌面浏览器中那样显示。当你滑动时会出现一条很小的线，它被插入到它的容器中，并且不会影响布局。如果您愿意，您可以使用任何其他jquery插件，例如.Why downlated？如果建议是错误的，那么以你的方式帮助它，并分享你的想法。这对我和其他人都有帮助。

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