uniapp小程序当页面内容超出时显示滚动条,不超出时不显示---样式自定义

使用scroll-view中的show-scrollbar属性 注意:需要搭配enhanced使用 否则无效
javascript 复制代码
	<scroll-view class="contentshow" scroll-y :show-scrollbar='true' :enhanced='true'>
					<view class="content" :show-scrollbar='true'>
						<text>{{vehicleCartinfo}}</text>
					</view>
				</scroll-view>

滚动条样式自定义

注意:此代码在ios情况下滚动条需要滑动时才显示并且不滑动过后就会隐藏

安卓情况下正常显示

css 复制代码
/deep/ .u-transition {
			z-index: 19999 !important;
		}

		// 滚动条样式
		/deep/ ::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 2px !important;
			height: 1px !important;
			background: #ccc !important;
			display: block !important;
		}

		/deep/ ::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 10px;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background-color: #bfbfbf;
		}

		/deep/ ::-webkit-scrollbar-track {
			background: #f0f0f0;
		}
相关推荐
漫游的渔夫9 分钟前
RAG 落地 3 个月,我才发现排序(Rerank)比检索更重要
前端·人工智能
衣乌安、15 分钟前
Agent之ReAct
前端·ai
CodeAI18 分钟前
不会 Next.js 你好意思说自己是 React 开发者?从零到上线一条龙
前端
竹林81818 分钟前
Web3表单签名验证:我如何用 wagmi 和 siwe 让用户“无密码”登录
javascript
霁月的小屋28 分钟前
不只是压缩:当模型蒸馏开始复制人格
前端·ai
inksci28 分钟前
使用飞帆的上传组件
前端·javascript
里欧跑得慢32 分钟前
微交互设计模式:提升用户体验的细节之美
前端·css·flutter·web
xiao阿娜的妙妙屋132 分钟前
做知识视频效率提升10倍!知识博主用什么AI工具做知识视频?我的答案是即梦Seedance 2.0
前端
干洋芋果果32 分钟前
前端学python
开发语言·前端·python
FOREVER-Q34 分钟前
基于 Vite 的前端 SDK 工程化设计与模块化构建实践
开发语言·前端·javascript