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;
		}
相关推荐
!win !37 分钟前
前端跨标签页通信方案(上)
前端·javascript
xw541 分钟前
前端跨标签页通信方案(上)
前端·javascript
烛阴1 小时前
Python数据可视化:从零开始教你绘制精美雷达图
前端·python
全栈前端老曹1 小时前
【前端组件封装教程】第3节:Vue 3 Composition API 封装基础
前端·javascript·vue.js·vue3·组合式api·组件封装
27669582921 小时前
朴朴超市小程序分析
java·python·小程序·node·sign·朴朴超市·sign-v2
低代码布道师1 小时前
医疗小程序04添加就诊人
低代码·小程序
answerball1 小时前
Webpack:从构建流程到性能优化的深度探索
javascript·webpack·前端工程化
LinXunFeng1 小时前
Flutter 拖拉对比组件,换装图片前后对比必备
前端·flutter·开源
BD_Marathon1 小时前
【PySpark】安装测试
前端·javascript·ajax
stu_kk1 小时前
Ecology9明细表中添加操作按钮与弹窗功能技术分享
前端·oa