用于滚动水平工具栏内容的图标箭头，是否可以使用纯CSS？

Question

有人必须建立一个带有scrool图标箭头的工具栏吗？ 我的想法是有一种方法在图标上水平滚动（以显示隐藏的那些）。

我认为只能用js完成？ 你怎么看 ？ 感谢。

Answer 1

试试这个样本.....我们使用css创建一个水平滚动...

.wrapper {
background:#EFEFEF;
box-shadow: 1px 1px 10px #999;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 800px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}

对于演示：JSFIDDLE

Answer 2

实际上，你应该启用水平滚动（就像在另一个答案中给出的那样），或者使用非常简单的js来使其滚动。 说，像这样：

<div class="some_wrapper">
<div id="my_menu_to_be_scrolled"></div>
</div>
<img src="arr_l.png" onclick="menuScroll(0)">
<img src="arr_r.png" onclick="menuScroll(100)">
...
<script>
function menuScroll(menuOffset){
document.getElementById('my_menu_to_be_scrolled').style.marginLeft = -menuOffset+"px";
}
</script>

和...你应该硬编码包装器的宽度并使其溢出-x：通过css隐藏。