取消uniapp的scroll-view滚动条

文章详细介绍了如何在Vue.js项目中使用CSS(包括Webkit前缀)来控制滚动条的显示与隐藏,展示了两种不同的代码实现方式。
摘要由CSDN通过智能技术生成

 重点代码部分:

/deep/ ::-webkit-scrollbar {
	  display: block;
	  width: 4px !important;
	  height: 1px !important;
	  overflow: auto !important;
	  background: transparent !important;
	  -webkit-appearance: auto !important;
	}

 有滚动条代码:

<template>
	<view class="home">
		<scroll-view scroll-x  class="navscroll">
			<view class="item" v-for="item in 10">国内</view>
		</scroll-view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.navscroll{
	height: 100rpx;
	// background-color: #fa7f8fa;
	background-color: #40a1fa;
	white-space: nowrap;
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding:  0 30rpx;
	}
}
</style>

隐藏滚动条代码:

<template>
	<view class="home">
		<scroll-view scroll-x  class="navscroll">
			<view class="item" v-for="item in 10">国内</view>
		</scroll-view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.navscroll{
	height: 100rpx;
	// background-color: #fa7f8fa;
	background-color: #40a1fa;
	white-space: nowrap;
	/deep/ ::-webkit-scrollbar {
	  display: block;
	  width: 4px !important;
	  height: 1px !important;
	  overflow: auto !important;
	  background: transparent !important;
	  -webkit-appearance: auto !important;
	}
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding:  0 30rpx;
	}
}
</style>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值