<template>
<view class="page-demo">
<scroll-view class="scrool-more" scroll-x="true" scroll-with-animation="true">
<text class="label-name" v-for="(item,index) in listTypecont" :key="index">
{{item.name }}
</text>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
listTypecont:[
{name:"司藤"},
{name:"三生三世十里桃花"},
{name:"宸汐缘"},
{name:"半妖司藤"},
{name:"百岁之约,一言为定"},
{name:"全部全部"},
]
};
},
}
</script>
<style>
/* 去除scroll-view产生的横向滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.scrool-more{
/* white-space: nowrap; 表示的不换行*/
white-space: nowrap;
/* 宽度100%必须给 */
width: 100%;
height: 100rpx;
vertical-align: middle;
line-height: 100rpx;
background: pink;
}
.label-name{
width: 140rpx;
color: #fff;
}
</style>
去除横向滚动条和纵向滚动条的区别
去除横向滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
去除纵向滚动条
.page-demo{
/* 去除滚动条*/
height: 100vh;
overflow-y: auto;
}
/* 去除滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
我们可以发现滑动的时候,横向滚动条已经消失了。