移动端 实现ul横向滚动条

时间:2023-03-09 15:42:49
移动端 实现ul横向滚动条
    ul {
display: flex;
width: 100%;
height: 3.333333rem;
background: #fff;
padding: 0.373333rem 0.32rem 0;
box-sizing: border-box;
/* 下面是实现横向滚动的关键代码 */
display: inline;
float: left;
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch; /*解决在ios滑动不顺畅问题*/
overflow-y: hidden;
}
ul li {
display: inline-block; /*设置li为行内块级元素*/
width: 3.6rem;
height: 2.24rem;
text-align: left;
border-radius: 6px 6px 6px 6px;
margin-right: 0.373333rem;
}

隐藏滚动条

ul::-webkit-scrollbar {
display: none;
}