关于移动端导航栏滑动的小技巧

html-css07

关于移动端导航栏滑动的小技巧,第1张

css3之前,我能想到的大概是在nav上绑定touchstart、touchmove、touchend事件,然后获取位置,并写判断设置最大移动距离。

这里css提供了一个相当简单的方法,overflow-x:scroll,这个会为溢出的nav设置一个滚动条,但移动端是不需要这个滚动条的,所以这里还有另外一个伪类

这里写一下关于这个滑动条的其他伪类选择,可以设置其样式:

滚动条宽 长,滚动条整体部分,其中的属性有width,height,background,border等

滚动条的滑轨背景颜色,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

滑块颜色

滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

 横向滚动条和纵向滚动条相交处尖角的颜色

可以使用:hover这个伪类选择器,当鼠标移动到带有这个伪类的元素之后变更样式,比如a:hover{color:red} 鼠标移动到A元素上时,文字变为红色,如果无效不要质疑,可以加入!important ,即a:hover{color:red !important},希望你能举一反三,hover出各种效果