css3之前,我能想到的大概是在nav上绑定touchstart、touchmove、touchend事件,然后获取位置,并写判断设置最大移动距离。
这里css提供了一个相当简单的方法,overflow-x:scroll;,这个会为溢出的nav设置一个滚动条,但移动端是不需要这个滚动条的,所以这里还有另外一个伪类
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
这里写一下关于这个滑动条的其他伪类选择,可以设置其样式:
滚动条宽 长,滚动条整体部分,其中的属性有width,height,background,border等
::-webkit-scrollbar{undefined
width: 7px;
}
滚动条的滑轨背景颜色,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track{undefined
background-color: #f5f5f5;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);
border-radius:5px;
}
滑块颜色
::-webkit-scrollbar-thumb{undefined
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-button{undefined
background-color: #eee;
display: none;
}
横向滚动条和纵向滚动条相交处尖角的颜色
::-webkit-scrollbar-corner{undefined
background-color: black;
}