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;
		}
相关推荐
天若有情6735 小时前
XiangJsonCraft v1.2.0重大更新解读:本地配置优先+全量容错,JSON解耦开发体验再升级
前端·javascript·npm·json·xiangjsoncraft
Rysxt_5 小时前
UniApp五大UI框架与uni-ui核心区别对比
uni-app·uni-ui
2501_944525545 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 预算详情页面
android·开发语言·前端·javascript·flutter·ecmascript
打小就很皮...6 小时前
《在 React/Vue 项目中引入 Supademo 实现交互式新手指引》
前端·supademo·新手指引
C澒6 小时前
系统初始化成功率下降排查实践
前端·安全·运维开发
摘星编程6 小时前
React Native + OpenHarmony:自定义useFormik表单处理
javascript·react native·react.js
C澒6 小时前
面单打印服务的监控检查事项
前端·后端·安全·运维开发·交通物流
pas1366 小时前
39-mini-vue 实现解析 text 功能
前端·javascript·vue.js
qq_532453536 小时前
使用 GaussianSplats3D 在 Vue 3 中构建交互式 3D 高斯点云查看器
前端·vue.js·3d
2501_915918416 小时前
HTTPS 代理失效,启用双向认证(mTLS)的 iOS 应用网络怎么抓包调试
android·网络·ios·小程序·https·uni-app·iphone