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;
		}
相关推荐
jiayong234 分钟前
0基础学习VUE3 第 3 课:任务页怎么把列表、筛选、表单、弹窗串起来
前端·javascript·学习
蜡台5 分钟前
Monorepo 架构管理多个子项目实现
前端·javascript·vue.js·pnpm·monorepo
guojb8246 分钟前
从0开始设计一个树和扁平数组的双向同步方案
前端·数据结构·vue.js
前端小趴菜058 分钟前
Vue项目,前端如何来做登录密码加密传输?
前端·javascript·vue.js
tangdou3690986559 分钟前
图文并茂安装Claude Code 以及配置 Coding Plan 教程
前端·人工智能·后端
arvin_xiaoting10 分钟前
OpenClaw学习总结_II_频道系统_4:Slack集成详解
前端·学习·自动化·llm·ai agent·飞书机器人·openclaw
CHU72903518 分钟前
让知识传递更顺畅:在线教学课堂APP的功能设计
前端·人工智能·小程序
周淳APP20 分钟前
【React Hook全家桶】大致过一遍React Hooks
前端·javascript·react.js·前端框架·react hooks
sheji341623 分钟前
【开题答辩全过程】以 基于web的图书借阅系统的设计与实现为例,包含答辩的问题和答案
前端