css实现h5页⾯滚动效果本⽂讲解下⽤css实现页⾯导航滚动效果
<div class="rollBox">
<a href="###">前端⼯具</a>
<a href="###">Android</a>
<a href="###">插件使⽤</a>
<a href="###">git</a>
<a href="###">smarty</a>
<a href="###">⾯试</a>
<a href="###">linux</a>
css去掉滚动条<a href="###">h5</a>
<a href="###">app</a>
<a href="###">node</a>
<a href="###">部署</a>
<a href="###">移动页⾯</a>
</div>
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;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论