登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

css实现h5页面滚动效果

2016-01-18 17:40:51 | 浏览量:3952

由于手机屏幕空间较小,在手机端显示分类导航多时一行显示不全,常常在后面显示一个'更多',点击展开全部,选择后再隐藏。这种交互不时很完美,在用户反复选择时,就得来回点使其展开、隐藏。

在移动端有更好的展示方式,如'蜻蜓FM'app上的节目分类是采用的左右滚动方式,方便用户选择。

本文讲解下用css实现页面导航滚动效果

html代码:



css样式代码:


{
    margin: 0;
    padding: 0;
}
html {
    font-size: 2rem;
}
a:link {
    text-decoration: none;
    color: #0088cc
}
.rollBox {
    height: 2rem;
    line-height: 2rem;
    clear: both;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-points-x: repeat(100%);
    scroll-snap-type: mandatory;
}


如果需要把滚动条去掉,加上下面样式即可


/*隐藏滚动条*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
}

示例地址

具体代码 见github 有问题留言交流!

需求及问题提交:

点击图片更换数字

0.6069s