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 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手10 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one10 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲10 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell11 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_4378309412 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮12 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel13 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip14 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio14 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换