去除小程序scroll-view产生的横向滚动条

<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;
	}

我们可以发现滑动的时候，横向滚动条已经消失了。