CSS元素超出部分滚动，并隐藏滚动条(谷歌、uni-app、微信小程序适用)

• 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE

HTML

<view class="nav_data" >
	<view v-for="(item,index) in navData" :key="index" class="nav_data_inner">
		<view class="nav_item" @click="_clickNav(index)" :class="s_index == index ? 'active' : ''">
		<text>{{item.name}}</text>
			<view class="nav_item_border"></view>
		</view>
	</view>
</view>

CSS

.data_list::-webkit-scrollbar {
  	display: none;
 }
 
.nav_data{
	display: flex;
	overflow-x: scroll;
	scrollbar-width:none;
}

.nav_data_inner{
	padding: 20rpx 10rpx;
	padding-bottom: 6rpx;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

.nav_data .nav_item{
	padding: 0 30rpx;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 28rpx;
}
.nav_data .nav_item .nav_item_border{
	width: 95%;
	margin-top: 10rpx;
	border-bottom: solid 4rpx rgba(0,0,0,0);
}
.nav_data .nav_item.active {
	color: #f32c2e;
}

.nav_data .nav_item.active .nav_item_border{
	border-bottom: solid 4rpx #f32c2e;
}

主要是这一块

.data_list::-webkit-scrollbar {
  	display: none;
 }