最近写项目用到这个东西
需求是可以横向滚动,但是要隐藏滚动条
直接上代码:
html代码
<div class="box">
<div class="scroll">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
css代码:
<style>
.box{
width: 500px;
height: 50px;//重点
overflow: hidden;//重点
}
.scroll{
height: 68px;//重点
width: 500px;
overflow-x: scroll;//重点
overflow-y: hidden;//重点
}
ul{
width: 800px;
list-style: none;
display: flex;
}
li{
flex-grow: flex;
width: 100px;
height: 60px;
}
</style>
总结:在外层再套一个div,但是外面的div高度比内容div的高度小,这样的挡住了,不是通过设置没有了,只是看不见而已
值得注意的是:横向滚动条的高度是18px,所以要精确到1px的话,会有用。
这种方法算不上好,但是比较方便,套个盒子,加overflow:hidden;注意高度就完事了。
根据上面的方法,竖向的滚动条也可以做到这种效果。
还有其他好的方法,希望在下面留言,学习学习,谢谢!!