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

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;

    }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容